iconfont添加新图标_老项目中的iconfont字体图标添加新的图标

最近，一直在折腾自己的新的博客，采用的是halo博客系统，感觉还是很不错的，就是主题有点少，自用的主题是siren,感觉自己做的不错就分享到了halo论坛，然后被提示标题前面的图标不显示。

也不知道说的是不是标题前的图标。

研究了一下发现，siren主题(有时间该换个名字吧)，原来是hexo的主题(另一个博客系统)，后来一直过来的，原来采用的是FontAwesome字体，移植过来换成了iconfont字体，移植过来标题前的图标都给取消了，但是其他部分的都还在。没办法了只能自己加了！

吐槽一下！这个“死人主题”，许多的不同模块格式都是一个CSS文件控制的，如果要修改，自己可要看清楚！

废话说完了，要来真的了!

老项目的iconfront字体加入新的图标！

1.打开iconfront官网

2.选择你自己要用的图标

添加好以后，点击下载图标代码。

3.解压文件，查看下载的图标

打开demo_index.html文件

可以看到自己下载的图标文件

4.修改字体文件名称

一共有四个文件，可以根据自己需求去修改，能和老文件区分开就可以。

修改的原因是，每次自己下载的代码就只包含下载的那些图标。老的如果被替掉那么原来系统的图标都会挂了！

这个也没办法，不像FontAwesome的字体是官方维护，因此每次只需要将所有图标字体下载就可以。iconfront是用户分享的没法做到，整体打包！

5.将修改好的文件上传服务器

6.将下载的iconfont.css文件加入到项目css文件中。

再添加的过程中可要小心不要将，.iconfont部分添加进去，这个可不一定和你原来的文件配置相同。

7.选择加到标题前的图标，记住图标编号(老系统采用的Unicode引用)

8.将图标代码添加在文字前面



9.保存、刷新、大功告成！

iconfont添加新图标_老项目中的iconfont字体图标添加新的图标相关推荐

项目中引用Iconfont（阿里巴巴矢量图标）的方式
Iconfont的官网:https://www.iconfont.cn/ 首先没有账号的需要先注册账号,可以用微博扫码或者GitHub账户登录. 登录成功后搜索框搜索到你需要的图标悬停在搜索结果中的 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址:IconFont-阿里巴巴矢量图标库一.注册账号要使用阿里图标,首先你要在它的官网注册一个账号,注册的方式有多种(手机号,Github,微博,阿里域账号),根据你自己的情况进行选 ...
vue项目中引入iconfont
背景对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...
新窗口打开vue项目中的静态pdf文件，并做权限控制
问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 "项目地址/operate.pdf "此地址,会展示pdf文件. 描述:点击系统内的一个按钮会打开新窗口展示系统 ...
为什么在2012/2013年我将在新的Enterprise Java项目中继续使用Spring *和* Java EE
自从我担任技术决策职务以来已经过去了一年多,很高兴看到我仍然与之保持着完美的和谐. 几个月前,我在KaiWähner的一个不错的博客中写了一个有关JEE与Spring的答案. 如果观点没有不同,那么讨 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
vue项目中导入icon字体文件出现This relative module was not found:* ./iconfont.eot?t=1523541245904
报错提示: This relative module was not found: *./iconfont.eot?t=1523541245904 in ./node_modules/css-load ...

iconfont添加新图标_老项目中的iconfont字体图标添加新的图标

iconfont添加新图标_老项目中的iconfont字体图标添加新的图标相关推荐

最新文章

热门文章