web字体图标的使用

方法:

1.在icomoon字库网站上下载完了字体之后,将压缩包解压

2.将压缩包中的font文件夹,拷贝到所需使用的样式表文件同路径下(下面引用的时候,没有加../到上级目录)

   就是@font-face的url地址要注意,他的作用就是找到导入的font文件夹

3.将压缩包中的css文件内容部分拷贝到自己的样式表中(看源码)

4通过font-family:"icomoon"引用,打开压缩包的html文件将图标右下角矩形选中,ctrl+c复制在引用时粘贴

5.通过压缩包里面的json格式的文件,可以追加字体文件

文件的路径:

html格式文件:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?4mm4qn');
  src:  url('fonts/icomoon.eot?4mm4qn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?4mm4qn') format('truetype'),
    url('fonts/icomoon.woff?4mm4qn') format('woff'),
    url('fonts/icomoon.svg?4mm4qn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* 这里注意url地址前面没有加../这种到上级目录,如果引用不成功很可能是这里出错。*/
    
    span,em,i{
    	font-family: "icomoon";
    	font-size: 100px;
        font-style: normal;
        color: #CB2A0F; 
        /*有些浏览器可能上面字体倾斜样式不起作用,还是需要默认添加*/
    }
	</style>
    
</head>
<body>
	<span></span>
	<em></em>
	<i></i>
	<!-- 通过压缩包里面的html打开,对应的图形下面右边小矩形ctrl+c快捷键复制,这里粘贴 -->
</body>
</html>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/83175817