Hexo-使用阿里iconfont图标

Hexo-使用阿里iconfont图标

因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么。

首先,fa fa-xxx中的图标可以在 图标库 中寻找。

(上面慢的话,可以在这个:另一个图标库)

例如:

  首页: / || fa fa-home
  归档: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags



显而易见,就算能找到也有很多图标找不到,所以这个时候,我们可以选择使用阿里iconfont图标

建立项目

1.进入阿里 iconfont 寻找你想要添加的图标,并且添加到项目

2.找到你想添加的图标,将你想要添加的图标点击 “添加入库” 按钮。

3.点击右上角小购物车图标,这里会看到你刚刚添加的所有图标

4.添加至项目

5.随便起个项目名字,项目创建成功如下:

6.生成在线链接

点击 Font class 按钮,点击查看在线链接,会生成在线链接

  1. 打开链接红线上的就是调用的名称

引入字体样式

1.存入css

在页面中右键另存为,存到\themes\butterfly\source\css\:


2.引入文件

使用图标

可以在\source\_data中的butterfly.yml修改social

  iconfont icon-rss: /atom.xml || RSS链接


当然图标你可以感觉会挺小的,可以在保存的css文件中自行修改:

.icon-xxx:before {
  content: "\e600";
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

这样修改会导致所有这个图标的大小都会变动。建议的方式是重新写一个 css,为其添加规则。设置时只需要多加一个class 即可,例如:

.icon-xxx:before {
  content: "\e600";
}
/* 卡片处小图标 */
.card_icon {
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

成果图:

个人博客为:
MoYu’s Github Blog
MoYu’s Gitee Blog

人已赞赏
经验教程

实现基于股票收盘价的时间序列的统计(用Python实现)

2021-2-12 19:42:00

经验教程

docker的企业级仓库-harbor

2021-2-12 20:17:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索