前端开发怎么使用图标字体？

最新推荐文章于 2022-06-30 15:25:43 发布

兰亭古墨

最新推荐文章于 2022-06-30 15:25:43 发布

阅读量681

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hefeng6500/article/details/78057327

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

获取图标字体：

(1)GlyphiconHalfling：收费的800+图标；

(2)FontAwesome：免费的675个图标；

(3)IconMoon 自定义图标字体，上传svg制作自己想要的图标字体； svg字体获取（http://www.iconfont.cn）

使用图标字体：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<link rel="stylesheet" href="css/index.css" />-->
		<!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
		<style>
			@font-face{
			    font-family: "PingFang"; //苹果的平方字体
			    src:url('fonts/PingFangRegular.ttf'); // 还有其他格式的字体，不仅仅是ttf，如woff、eot
			}
			@font-face{
			    font-family: "miui"; //小米兰亭字体
			    src:url('fonts/miui.ttf');
			}
			p{
			    font-size: 36px;
			}
			.c1{
			  font-family: 'PingFang';  
			  
			}
			.c1{
			   font-family: 'miui';  
			}
		</style>
	</head>
	<body>
	<body>
		<p class="c1">世事洞明皆学问，人情练达即文章123456789asdfghjkl</p>
		<p class="c2">世事洞明皆学问，人情练达即文章123456789asdfghjkl</p>
	</body>
</html>