目 录CONTENT

文章目录

博客引入iconfont图标

米尔嘉
2023-07-03 / 0 评论 / 0 点赞 / 359 阅读 / 1,102 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-12-26,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

iconfont图标

国内最出名的莫过于iconfont,功能很强大且图标内容很丰富的矢量图标库。很多Font Awesome不支持的图标都可以在这里找到。同时,iconfont支持选择需要的图标生成css链接,减少不必要的CSS加载。

第一步:注册一个阿里巴巴图标库的账号

阿里巴巴图标库传送门

第二步:进入到项目管理页面新建项目

点击顶部导航-资源管理-我的项目,点击右侧的新建项目图标
Font Family:halo-icon
FontClass/Symbol 前缀 halo-icon-

第三步:开始查询需要用到的图标(此处以彩色为例)

查找的方式有两种,分别如下:
第1种: 点击顶部素材库 - 点击多彩图标,进入多彩图标页面;
第2种:点击右上角的搜索,输入图标关键词回车进行搜索;

第四步:将图标添加到刚刚新建的项目

鼠标划过所需要的图标,有一个购物车的图标按钮,点击一下 先放进购物车。选择完我们所需要的图标后,点击右上角的购物车按钮,将所有的图标添加到项目中。然后点击生成代码获得阿里云的cdn在线链接或者将直接下载到本地。

第五步:将图标引用到博客中

在halo后台找到主题设置-外观-自定义,将字体文件链接填写到字体图标链接中,此处有两种方式:

第一种,使用阿里云提供的cdn,将第四步中的cdn链接直接填写到字体图标链接中
第二种,将字体文件下载到本地,解开压缩包后,只要iconfont.css这个文件上传到你的服务器中,获取其链接地址,填入字体图标链接中。

第六步:在任意地方使用图标

现在,您就可以在任意地方使用你的图标啦,比如本文所说的导航图标(温馨提示,导航图标需要在主题设置-导航-开启菜单图标)。

首先,找到外观-菜单设置,编辑菜单,此时可以看到右侧的图标;
接着,再次回到阿里巴巴图标库,刚刚的项目当中,点击复制代码,将代码粘贴到图标填写的地方,(注意!注意!注意!一定要记得加上一个图标的前缀!如果您按照我的流程原封不动的走到这里,完整的图标应该是这样的halo-icon halo-icon-nuomici,也就是在你复制阿里图标库的值之后,这个值前面需要加halo-icon前缀,记得有一个空格隔开哦)。

如果你想在别的地方使用,也一样很轻松,比如 <i class="halo-icon halo-icon-nuomici"></i> 把这句代码放到你的html模板中要使用的地方就可以看到图标啦,记得把class=" "的值换成你的图标名称哦!

Font Awesome

Font Awesome网站传送门
由于Font Awesome是国外的图标网站,对于国内的一些网站Icon并不支持。如有需要,你可以引入其它的图标服务商。

要使用Font Awesome,我们先要理解Font Awesome图标库的原理,首先,一个字体中是存在特殊符号的,例如网页底部常见的©的编码就是&#169。而Font Awesome本质上是把图标做成了字体文件,一个图标代表一个特殊符号,因此我们需要这个图标的话只需要引用这个字体文件就好了
引入如下:

<div class="icon">&#xf2b9</div>

除了iconfont,Font Awesome,还有RemixIcon、Flaticon等等提供商,很多图标可以选择,具体使用方法请参考各自的文档。

参考文章

0

评论区