使用图标字体的正确姿势-前端ABC

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 » 使用图标字体的正确姿势

使用图标字体的正确姿势

相关推荐

发表评论 0