在 Hexo 中使用 iconfont 图标
iconfont首页
iconfont 获取
- 可以先在首页搜索你想要的图标，然后添加到购物车中，然后把购物车中的图标添加到项目中，如果没有项目的话可以新建一个项目。
- 生成在线链接
- 点击 font class 按钮直接就可以生成链接了
- 复制生成的链接地址，在浏览器窗口查看
引入字体样式
可以选择直接把字体样式下载引入到博客中，或者直接把刚才的链接引入，这里我就先选择下载到本地
- 把刚才查看的 css 代码另存为
/themes/Butterfly/source/css/中，命名为iconfont.css - 在
_config.butterfly.yml中引入样式文件
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:head:# - <link rel="stylesheet" href="/xxx.css"><link rel="stylesheet" href="/css/iconfont.css">bottom:# - <script src="xxxx"></script>
我的博客主题是 Butterfly 根据自己的主题参考即可
开始使用
在 _config.butterfly.yml 中添加
social:iconfont icon-git: https://github.com/03DuLi || Githubiconfont icon-email: mailto:duli2476@163.com || Emailiconfont icon-gitee1: https://gitee.com/dulily || Giteeiconfont icon-csdn1: https://mp.csdn.net/console/article?spm=1010.2135.3001.5128 || CSDN
注：这里我只是引入了图标样式。没有引入图标的其他字体文件，可以根据自己的需要引入文件
样式可以查看我的博客哦
在 Hexo 中使用 iconfont 图标相关推荐
- 如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
- Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
- 如何在Axure中使用Iconfont图标字体
需求背景 在原型设计中,图标是我们使用率非常高的元素,通常我们会选择将图标导出为图片放到Axure里使用,或者使用Axure的图标元件库,但是他们使用起来会有很多不方便的地方: 图片进行缩放会失真,无 ...
- iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
- uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
- 微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
- 在项目中使用iconfont图标(在线使用)
1.进入到阿里巴巴矢量图官网(https://www.iconfont.cn)搜索你想要的图标并加入项目中,如下图我的项目,项目名highway,已经添加了三个图标. 2.点击Font class 复 ...
- uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果 选择图标加入项目 在项目设置中勾选base64和彩色,取消其它项 查看生成的代码 可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
- 微信小程序中使用 iconfont 图标的四种方法
1. 先去 iconfont 官网选择自己需要的图标,添加到项目中 点击红框 在浏览器中输入地址,得到的文件另存为 iconfont.wxss,放入项目的根目录下 打开 app.wxss @impor ...
- uniapp中使用iconfont 图标库
我们要是想使用 图标的话,快速的应用到我们的项目中 1.阿里矢量图标库 作为一个前端开发人员还是要了解的 今天就说一下 怎么快速应用到我的uni-app项目中 第一步 选择图标点击 我的项目 没有 ...
最新文章
- Android SDK更新下载失败以及Studio首次安装取消自动下载SDK
- java arraylist 字符串_Java ArrayList、string、string[]之间的转换
- 来个“云”毕业典礼，这些装扮太硬核了！
- 拿下阿里投资 回血的网易云音乐能成功突围吗？
- 物联网卡在智慧农业的作用有哪些
- Hive中数据的导入与导出
- windows 下pcl的安装和编译
- 项目管理：研发项目经理为何难做
- 动网论坛 php版,动网即将推出第二代PHP版本论坛系统
- LCD/LED驱动芯片(IC)/触摸IC资料汇总，仅供大家选型参考
- 题解第八届蓝桥杯B.等差素数列
- 美团｜商家数据指标体系搭建实例 。
- 微信小程序-wxs实现时间格式化过滤器（正则）
- 我的团长我的团第十四集
- charles 代理设置
- 引用论坛、社区、问答系统的区别
- 一文聊透Netty核心引擎Reactor的运转架构
- 为什么卷积层不加bias
- ie浏览器怎么打开html,win10ie浏览器不能打开html设置怎么办
- 1、Django项目设计与搭配开发环境