字体图标是一些网页常见的小图标，可以直接从网上下载。
字体图标的使用可以分为：
1）字体图标的下载
2）字体图标的引入，引入到html页面中。
3）字体图标的追加，就是添加新的小图标。
推荐下载网站：
- icomoon字库
https://icomoon.io/
- 阿里iconfont字库
https://www.iconfont.cn/?spm=a313x.fonts_index.i3.2.7f7b3a81ptg2Pw
下面看看怎么从icomoon字库网站下载。
访问icomoon官网：
点击IcoMoon App：
跳转到了下面的页面：
点击自己想要的图标，可以选择多个，在页面的下发显示选择了多少个图标：
如果这里边的图标不够用的，可以拉倒页面底部，点击 Add Icons From Library：
就打开了库的窗口：
想要哪个模块的，就点击 Add：
就会自动添加过来，供我们选择：
除了选择图标以外，还可以在线编辑图标。
点击上面的Edit：
点击自己想要编辑的图标：
就跳出来编辑界面：
可以旋转、移动、缩放、改变颜色：
编辑完毕，就变成自己想要的效果了：
不想编辑了，点击选择箭头：
现在选择了22个图标：
要把这些选中的图标生成字体，点击右下角的 Generate Font F：
就跳转到了下面的页面：
点击页面右下方的Download按钮，就可以下载了：
这个文件下载下来，就表示下载成功了：
下载完毕之后，注意原先的文件不要删，后面会用。
将下载下来的icomoon.zip文件解压后，得到如下目录结构：
最重要的文件夹是fonts文件夹，点击进去，有4个不同的字体文件：
之所以有4种字体文件，是为了兼容不同的浏览器，因为不同的浏览器支持的字体格式是不一样的。字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
将字体文件引入到页面的语法：
打开字体图标解压包中的demo.html文件，我们下载下来的字体图标都有展示：
想用哪个图标，就拷贝右侧的小框框到html文件中，这个小框框就是字体图标的特殊符号：
在样式中给使用字体图标的元素指定字体，必须和@font-face中font-family指明的一样：
现在打浏览器中查看，字体图标就正确显示出来了：
既然字体图标本质是字体，那么就可以随意指定大小、颜色，例如：
现在的展示效果：
咱们如法炮制，在html中再加一个字体图标：
展示效果：
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/49366.html