WordPress部署阿里图标取代font awesome的图文教程

投稿   龙砚庭博客  2017-09-27 07:27:45  207 人阅读  20 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

font awesome 图标几乎是每个主题必备的基本要素,不过它的文件包确实够大。当初我在写 Minimalist主题的时候,本来是已经集合了 font awesome,但一看最后的主题包文件大小,当场便拆掉了……开什么玩笑,图标文件比主题文件还要大2倍不止。这不是要命嘛……后来我用了阿里图标作为替代首选,不为别,人家至少可以按需添加项目库的图标,而且又能在线引入,何乐而不为呢。

WordPress部署阿里图标取代font awesome的图文教程 WordPress 第1张

准备工作

  1. 注册阿里图标帐号,也可以用Github帐号授权登录;
  2. 创建项目库:图标管理-我的项目;
  3. 从图标库寻找需要的图标,然后添加入库(自己建的项目库)。
  4. 阿里图标官网(点此直达)。

部署工作

1、到我的项目里面,点击【查看在线链接】,点击生成代码,就可以看到 @font-face。

2、打开自用主题的 style.css 文件,将生成的 font-face 扔进去,例如:

  1. @font-face {font-family: 'iconfont图标名称(用户自定义)';
  2.     srcurl('iconfont.eot');
  3.     srcurl('iconfont.eot?#iefix') format('embedded-opentype'),
  4.     url('iconfont.woff') format('woff'),
  5.     url('iconfont.ttf') format('truetype'),
  6.     url('iconfont.svg#iconfont图标名称') format('svg');
  7. }

3、然后在其后面,定义 iconfont 的样式:

  1. .iconfont图标名称(要跟上面自己定义的名称一致){
  2.     font-family:"iconfont图标名称" !important;
  3.     font-size:16px;font-style:normal;
  4.     -webkit-font-smoothing: antialiased;
  5.     -webkit-text-stroke-width: 0.2px;
  6.     -moz-osx-font-smoothing: grayscale;
  7. }

改造工作

接下来就是给主题的图标进行大改造。每个主题用到的图标位置不同,这里我就不一一列举了。它的使用方法跟 font awesome 差不多,举个栗子:

  1. <i class="iconfont图标名称(要跟自己定义的名称一致)">图标代码</i>
  2. <!----------备注:根据需要替换上面的图标代码------------>

话唠补充

其实,我不想给 Leo主题换上阿里图标的另外一个原因,就是——font awesome 图标是可商用免费的,但阿里图标目前定位不明,它里面的很多图标都是用户原创的,在没有经过原作者的许可下,随便挪去商用,谁也不知道会不会被告侵权。或许有人会说‘我的博客就是一个人博客,又不盈利’,但人家真要追究起来,也是侵权啊,比如使用权。

最后用一张图,总结本文:

WordPress部署阿里图标取代font awesome的图文教程 WordPress 第2张

历史上的今天:

文章标签: ,   ,  
原文地址:http://loomob.com/231.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙砚庭博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!

 发表评论


  1. 8S分享网
    8S分享网 【举人】 @回复

    暂时没用到这个功能,刚建博客不久,先留个脚印,到时候再说

  2. 爆爆小妹
    爆爆小妹 【秀才】 @回复

    [偷笑] 又省流量了!!

  3. Devoted
    Devoted 【举人】 @回复

    同意楼下!

  4. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    其实我看到代码就有点头痛,哈哈

  5. 演绎法
    演绎法 【进士】 @回复

    很好的内容

  6. 侯总博客大全
    侯总博客大全 【举人】 @回复

    要备案不。。。。

  7. 九哥
    九哥 【进士】 @回复

    各种折腾啊!小图标还是不错的。

  8. Hewie
    Hewie 【秀才】 @回复

    不错的分享

  9. 一伍一拾
    一伍一拾 【举人】 @回复

    不错!!!

  10. 阿财博客
    阿财博客 【举人】 @回复

    我喜欢,感谢分享

  11. 心动
    心动 【进士】 @回复

    这个我喜欢,感谢分享!

  12. 明月登楼的博客
    明月登楼的博客 【王爷】 @回复

    鸟哥的 Begin 主题新版也开始支持阿里图标了!我最近刚折腾完!不过,阿里图标很本土化,这方面是主要特点!

  13. 小苍老师
    小苍老师 【状元】 @回复

    阿里图标好像用的人挺多的!

  14. 里维斯社
    里维斯社 【进士】 @回复

    补充的说得有道理,尽管产品成熟,但还是不要去冒这个险

    • 橘子书
      橘子书 作者回复2017-09-27 19:19  回复

      @里维斯社嗯,主要是这些原创图标没有一个明确的声明——到底能不能商用。所以,真要严谨起来,用的不是很放心。

  15. 小萝博客
    小萝博客 【状元】 @回复

    抢先占个座