资讯专栏INFORMATION COLUMN

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

NotFound / 2233人阅读

摘要:图标字体的使用,方法一可以在下载相应的图表字体,官网为进去会提供的免费图表,如果想要更多的图表字体可选择如图所示选择好需要的图标后点击右下角的生成图标,生成后下来,下载好的文件会包含文件夹和文件文件,把文件夹和文件引入到项目中,文件需要根

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类不管哪种方法都不能去掉。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108783.html

相关文章

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

    摘要:图标字体的使用,方法一可以在下载相应的图表字体,官网为进去会提供的免费图表,如果想要更多的图表字体可选择如图所示选择好需要的图标后点击右下角的生成图标,生成后下来,下载好的文件会包含文件夹和文件文件,把文件夹和文件引入到项目中,文件需要根 icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/   进去会提供...

    paraller 评论0 收藏0
  • 如何项目使用icon-font 图标字体

    摘要:图标字体的使用,方法一可以在下载相应的图表字体,官网为进去会提供的免费图表,如果想要更多的图表字体可选择如图所示选择好需要的图标后点击右下角的生成图标,生成后下来,下载好的文件会包含文件夹和文件文件,把文件夹和文件引入到项目中,文件需要根 icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/   进去会提供...

    xiaoxiaozi 评论0 收藏0
  • 如何制作icon-font图标

    摘要:首先可以去阿里巴巴矢量字体库中下载你想要的图标选择格式为格式。打开这个网站这个样子的,然后点击右上角那个如下图上面有一个紫色的点击上传你下好的图标。鼠标箭头表示选择图标。垃圾桶表示删除图标,一般选择垃圾桶,点一下图标就可删除。 1、首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式)。 2、打开iconmoon这个网站(这个样子的),然后点击右上...

    yexiaobai 评论0 收藏0
  • 如何制作icon-font图标

    摘要:首先可以去阿里巴巴矢量字体库中下载你想要的图标选择格式为格式。打开这个网站这个样子的,然后点击右上角那个如下图上面有一个紫色的点击上传你下好的图标。鼠标箭头表示选择图标。垃圾桶表示删除图标,一般选择垃圾桶,点一下图标就可删除。 1、首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式)。 2、打开iconmoon这个网站(这个样子的),然后点击右上...

    bigdevil_s 评论0 收藏0
  • [盘点]项目可以怎么优化图片

    摘要:雪碧图雪碧图就是把很多小的图整合到一起,制作成一张比较大的图,然后作为元素的背景图片使用,定位到相应的图片即可。除此之外,使用雪碧图,有两个个注意地方不要把页面所有的图片都合并,比如把整合会破坏的语义结构。 看似平常的事物,往往会蕴含的巨大的智慧。把看似平常的事物简单做好,可能很正常。如果能把平常的事物做精,做细,这个不平常。 1.前言 每一个开发者在开发项目中,不可避免要和图片打交道...

    lykops 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<