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

Hexo-使用阿里iconfont图标的更多相关文章

  1. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  2. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  3. vue 中使用阿里iconfont彩色图标

    在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...

  4. veu——引入iconfont图标

    我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...

  5. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  6. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  7. vue使用阿里矢量图标

    官方注册注册 1.加入购物车 在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目:     2.下载 到我的项目中,将图标下载到本地     3.解压引入 在vue项目的asset ...

  8. day 51 阿里iconfont的使用

    阿里iconfont的使用   1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...

  9. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

随机推荐

  1. 阿里云RDS物理备份恢复到本地

    一:业务场景 验证阿里云备份文件可用性 二:恢复到本地过程中遇到的问题 1.修改密码报错 2.自定义函数不可用 三:恢复步骤 1.xtrabackup安装使用 请参考:https://www.cnbl ...

  2. CSS响应式布局学习笔记(多种方法解决响应式问题)

    在做web开发的工作中,会遇到需要我给页面根据设计的要求,进行响应式布局,这里跟大家分享下我对于响应式布局的解决方法: 我主要利用的是CSS3 媒体查询,即media queries,可以针对不同的媒 ...

  3. SpringBoot 自动配置:Spring Data JPA

    前言 不知道从啥时候开始项目上就一直用MyBatis,其实我个人更新JPA些,因为JPA看起来OO的思想更强烈些,所以这才最近把JPA拿出来再看一看,使用起来也很简单,除了定义Entity实体外,声明 ...

  4. 简话http请求

    一.http请求概念: 1.是指从客户端到服务器端的请求消息.包括:消息首行中,对资源的请求方法.资源的标识符及使用的协议. 包括请求(request)和响应(response) 2.过程: 域名解析 ...

  5. hive搜索报错

    在自己搭建的集群上执行hive搜索语句 select count(*) from ods_event_log where dt='2019-12-14' group by dt; 报错如下: Stat ...

  6. 强制杀死进程后,进程相关的socket未必发送RST

    强制杀死进程后,进程相关的socket未必发送RST

  7. TCP介绍

    TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义. TC ...

  8. 一次sql server实战

    前言:朋友在做授权项目的时候,遇到一个sql server数据库的注入点,没办法解决,让我帮忙看看,因为是授权项目,所以就可以帮助测试下. 内容如下: 单引号,很明显的错误,因为是时间格式:2020- ...

  9. (一)在Spring Boot应用启动之后立刻执行一段逻辑

    在Spring Boot应用启动之后立刻执行一段逻辑 1.CommandLineRunner 2.ApplicationRunner 3.传递参数 码农小胖哥:如何在Spring Boot应用启动之后 ...

  10. MapReduce编程练习(四),统计多个输入文件学生的平均成绩,

    问题描述: 在输入文件中,有多个,其中每个输入文件代表一个学生的各科成绩,其中每行的数据形式为<科目,成绩>,你需要将每个文件中的每科目的成绩进行统计,然后求平均值. 输入文件格式: 这里 ...