下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家,也给大家做个参考。
Font awesome 图标几乎是每个主题必备的基本要素,不过它的文件包确实够大。当初我在写 MinimaList 主题的时候,本来是已经集合了 Font awesome,但一看最后的主题包文件大小,当场便拆掉了……开什么玩笑,图标文件比主题文件还要大 2 倍不止。这不是要命嘛……后来我用了阿里图标作为替代首选,不为别,人家至少可以按需添加项目库的图标,而且又能在线引入,何乐而不为呢。
准备工作
注册阿里图标帐号,也可以用 Github 帐号授权登录;
创建项目库:图标管理-我的项目;
从图标库寻找需要的图标,然后添加入库(自己建的项目库)。
阿里图标官网(点此直达)。
部署工作
1、到我的项目里面,点击【查看在线链接】,点击生成代码,就可以看到 @Font-face。
2、打开自用主题的 style.CSS 文件,将生成的 Font-face 扔进去,例如:
@Font-face {Font-family: 'iconFont图标名称(用户自定义)';
src: url('iconFont.eot');
src: url('iconFont.eot?#IEfix') format('embedded-opentype'),
url('iconFont.woff') format('woff'),
url('iconFont.ttf') format('truetype'),
url('iconFont.svg#iconFont图标名称') format('svg');
}
3、然后在其后面,定义 iconFont 的样式:
.iconFont图标名称(要跟上面自己定义的名称一致){
Font-family:"iconFont图标名称" !important;
Font-size:16px;Font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-@R_502_5283@-wIDth: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
改造工作
接下来就是给主题的图标进行大改造。每个主题用到的图标位置不同,这里我就不一一列举了。它的使用方法跟 Font awesome 差不多,举个栗子:
<i >图标代码</i>
<!----------备注:根据需要替换上面的图标代码------------>
其实,我不想给 Leo 主题换上阿里图标的另外一个原因,就是——Font awesome 图标是可商用免费的,但阿里图标目前定位不明,它里面的很多图标都是用户原创的,在没有经过原作者的许可下,随便挪去商用,谁也不知道会不会被告侵权。或许有人会说‘我的博客就是一个人博客,又不盈利’,但人家真要追究起来,也是侵权啊,比如使用权。最后用一张图,总结本文:
以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的WordPress部署阿里图标取代font awesome教程全部内容,希望文章能够帮你解决WordPress部署阿里图标取代font awesome教程所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)