html和css：www.iconfont.cn @font-face自定义文字图标的使用

1.从www.iconfont.cn选中需要使用的图标，加入购物车，下载代码

 

2.将下载的文件夹解压，并且重命名为font，放入与.html同级的目录下 

3. 打开demo_index.html示例网页，将其中的代码@font-face和.iconfont复制到css文件中。

 

4.修改@font-face中的url地址，同时选择需要使用的图标的unicode，供下一步使用

5.使用。示例代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>font-face示例</title>
</head>
<style>

@font-face {
 	font-family: 'iconfont';
  	src: url('font/iconfont.eot');
  	src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
         url('font/iconfont.woff2') format('woff2'),
      	 url('font/iconfont.woff') format('woff'),
      	 url('font/iconfont.ttf') format('truetype'),
      	 url('font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  		font-family: "iconfont" !important;
  		font-size: 16px;
  		font-style: normal;
}

</style>
<body>
	<div class="div1">
		<span class="iconfont">&#xe632;</span>昨夜星辰恰似你
	</div>
</body>
</html>
运行效果

 

总结：使用font-face之后，图标和文字一样，可以设置颜色大小等文字属性了。比如，将图标设置成红色。

span{
	color: red;
}
红色效果
posted @ 2020-02-04 21:58  昨夜昙花  阅读(11)  评论(0)    收藏  举报