码迷,mamicode.com
首页 > 其他好文 > 详细

如何在项目中使用icon-font 图标字体

时间:2019-11-06 23:07:47      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:文件   tle   html   获取   查找   dex   选择   技术   16进制   

icon-font 图标字体的使用,

方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ ?

进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon Library;如图所示:
技术图片

选择好需要的图标后点击右下角的Generate Font生成图标,生成后download下来,下载好的文件会包含fonts文件夹和css文件、demo.html文件,把fonts文件夹和css文件引入到项目中,css文件需要根据项目路径做相应的字体路径更改,然后在你要显示的地方直接定义好你要用的图标的类名即可,css中的伪类不动。

下面贴代码:
技术图片

方法二:在阿里巴巴矢量图标库获取图标,地址:http://www.iconfont.cn/plus/h...

同样的查找到你需要的图标,然后添加到你自定义的项目中,再下载至本地,下载好的文件如图:
技术图片

把四种字体文件和iconfont.css引入到项目中,如果不考虑项目大小和直接拷贝整个文件夹,附图:
技术图片

此时在你要用到图标字体的地方有两种方式引入图标字体,一种为用该图标的类名;如:

另一种为用该图标的16进制码;如: 

注意iconfont类不管哪种方法都不能去掉。

如何在项目中使用icon-font 图标字体

标签:文件   tle   html   获取   查找   dex   选择   技术   16进制   

原文地址:https://www.cnblogs.com/qianduanwriter/p/11809026.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!