使用图标字体的正确姿势

1 首先在css中引入字体(定义字体名和字体链接)

@font-face {
    font-family: 'icon-font';//定义字体名
    src: url('./icomoon.ttf');//指定字体链接
   }

2 然后在需要使用图标字体的标签上(一般用span)定义css样式

span{font-family: icon-font;font-size: 30px;}//指定图标字体名,大小等等
span:before{content:"\e905";}//利用伪类进行填充,content代表图标的标记。

下面是个例子

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<style type="text/css">
	@font-face {
        font-family: 'icon-font';
        src: url('./icomoon.ttf');
   }
   span{font-family: icon-font;font-size: 30px;}
   span:before{content:"\e905";}

	</style>
</head>
<body>

<span></span>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 使用图标字体的正确姿势

赞 (2)
分享到:更多 ()

发表评论 0