张小驰出没 张小驰出没
首页
  • Spring合集
  • SpringMVC合集
  • Mybatis合集
  • Spring Boot合集
  • Mybatis-plus合集
  • Spring Security合集
  • Vue合集
  • Redis合集
  • RabbitMQ合集
  • 数据结构

    • 数据结构
  • 算法解析

    • 日常算法
    • 剑指Offer
    • LeetCode
  • 技术与Bug

    • 技术文档
    • Bug解决方法
  • 个人博客

    • Hexo博客搭建
  • 我的项目
  • 我的面试
  • 分类
  • 标签
  • 归档
友链
关于
Hexo
GitHub

MoYu

何德何能,何其荣幸
首页
  • Spring合集
  • SpringMVC合集
  • Mybatis合集
  • Spring Boot合集
  • Mybatis-plus合集
  • Spring Security合集
  • Vue合集
  • Redis合集
  • RabbitMQ合集
  • 数据结构

    • 数据结构
  • 算法解析

    • 日常算法
    • 剑指Offer
    • LeetCode
  • 技术与Bug

    • 技术文档
    • Bug解决方法
  • 个人博客

    • Hexo博客搭建
  • 我的项目
  • 我的面试
  • 分类
  • 标签
  • 归档
友链
关于
Hexo
GitHub
  • 技术与Bug

  • Hexo博客搭建

    • Hexo准备---Node.js、Vue
    • Hexo、主题、部署上线
    • Butterfly美化
    • Hexo之更换背景及透明度
    • Hexo-使用阿里iconfont图标
      • 建立项目
      • 引入字体样式
        • 1.存入css
        • 2.引入文件
      • 使用图标
    • Hexo-域名设置+收录
  • 技术
  • Hexo博客搭建
MoYu
2021-06-20

Hexo-使用阿里iconfont图标

# Hexo-使用阿里iconfont图标

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

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

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

1

例如:

  首页: / || fa fa-home
  归档: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
1
2
3
2 3 4

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

# 建立项目

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

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

5

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

6

4.添加至项目

7

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

8

6.生成在线链接

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

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

# 引入字体样式

# 1.存入css

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

11 12

# 2.引入文件

13

# 使用图标

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

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

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

.icon-xxx:before {
  content: "\e600";
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}
1
2
3
4
5
6
7

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

.icon-xxx:before {
  content: "\e600";
}
/* 卡片处小图标 */
.card_icon {
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}
1
2
3
4
5
6
7
8
9
10
16

成果图:

17
#Hexo#个人博客#美化博客#阿里iconfont图标
上次更新: 2021/06/20, 09:51:53
Hexo之更换背景及透明度
Hexo-域名设置+收录

← Hexo之更换背景及透明度 Hexo-域名设置+收录→

最近更新
01
链表
01-25
02
约瑟夫问题
01-25
03
快慢指针
01-25
更多文章>
Theme by Vdoing | Copyright © 2021-2022 MoYu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式