html如何把图标做成字体,css 字体图标如何使用？

css 字体图标如何使用？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

一些字体图标库的网站

https://icomoon.io/app/#/select

http://www.iconfont.cn/

http://www.bootcss.com/

http://www.bootcss.com/p/cikonss/

以第一个链接网站里的字体为例

选择自己需要图标，点击右下角下载下来

然后下载的文件一般都是这几个基本部件

我们需要的是fonts文件夹和style.css。

把fonts文件夹复制到自己的项目中根目录中

打开css文件

把代码复制到自己的某个css文件中，然后，重点注意红笔圈的地方，可以分别引用到单独html对应的css中

配置路径信息——在css中找到font文件夹并找到文件夹下的字体文件

在页面中，我们只要给一个元素添加相应的类名就行，因为在style.css中已经将类名对应的图标写好了。

页面中添加如下类似元素：

这样，我们的页面中就可以显示相应的图标了。

例如：

我这里要用第一个message的图标，我在html中这样引用：

另外我在css中设置其单独样式：

好了，大功告成！

更多web前端开发知识，请查阅 HTML中文网 ！！