html5的时代，用fontface，就是允许你加载第三方字体。建议：图标尽量用inconfont字体库。
pc端或移动端或响应式，都可以用inconfont。
可以用设计师给的图自己切小图标呀雪碧图呀，也可以跟设计师商量让他改成inconfont里的样子，或者让设计师给你svg格式的小图标。
使用步骤：
1.百度搜 inconfont，选择官网 iconfont-阿里巴巴矢量图标库，搜索 你需要的图标名称 加入购物车。然后在购物车数字那里点一下，选择 添加至项目（做自己项目或公司项目的话推荐加到项目上，以后修改就很方便），可以引入在线地址也可以下载到本地（推荐下载到本地）。
2.下载后，文件改个名（随便起名字）如“font”，然后文件中（eot、woff、ttf、svg）的后缀的文件，这四种格式是兼容所有文件的设备，把这几个文件一定要放到 “文件改个名（随便起名字）如“font” ” 中，新建的这个css文件（随便起名字）如“font.css”,然后font.css文件里，复制如下代码：
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.woff2?t=1639725568814') format('woff2'),
url('../font/iconfont.woff?t=1639725568814') format('woff'),
url('../font/iconfont.ttf?t=1639725568814') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3.然后在html中，引入“这个css文件（随便起名字）如“font.css””。
4.然后在html中，写 <span class="iconfont"></span> 标签可以换成任何一种，然后如果需要更改样式颜色大小，最好加上定好的class，如:
<style>
.icon-gouwuchekong{ font-size:100px; color:red;}
</style>
<body>
<span class="iconfont icon-gouwuchekong"></span>
</body>
5.这样就可以更改了，然后用起来很方便哦。
推荐使用 unicode 的应用方式，兼容性好，方便动态调整图标大小，颜色等等。（png图想改都得重新切，比较麻烦。）
总结：当学习一个新的东西时，拿到后，先看其文档。学习其手册，仔细读文字，看使用说明。
2820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
