懿古今主题内含图标升级到Font Awesome 5.0.13

2018年06月07日 11:23:35  阅读 556 次 评论 17 条

Nana 主题Blogs 主题内含的 Font Awesome 图标只是 4.3.0 版本,有博主反馈部分图标不显示之后,出了一篇升级到 4.7.0 版本,详见《懿古今主题部分图标字体不显示的解决办法》。不过这篇文章也过时了,因为 Font Awesome 图标已经升级到 5.0.13 版本,而 Font Awesome 5.0 之后改变了很多,包括图标库和使用方法,所以今天就把 Nana 主题和 Blogs 主题内含的 Font Awesome 图标升级到 5.0.13 版本。

懿古今主题内含图标升级到Font Awesome 5.0.13 技术文档 第1张

Nana 主题升级到 3.24 版本

  • 升级 Font Awesome 图标到 5.0.13 版本;
  • 修复熊掌号原创 API 接口,增加是否有原创权限选项。

WP 版本的 Blogs 主题升级到 1.45 版本

  • 升级弹窗效果到 Fancybox 3.1.20 版本;
  • 升级 Font Awesome 图标到 5.0.13 版本;
  • 修复熊掌号原创 API 接口,增加是否有原创权限选项。

如果直接下载使用 Nana 主题 3.24 版本或 WP 版本的 Blogs1.45 版本,那么可以直接在 Font Awesome 官方图标库(https://fontawesome.com/icons)找到自己喜欢的图标,然后点击该图片后获得类似以下代码:

  1. <i class="fas fa-home"></i>

然后将该代码添加到想要显示图标的地方即可。如果添加到导航菜单出现错位的,请参考这篇文章《WordPress 导航菜单添加个性图标错位的解决办法》。如果不想使用升级后的主题,那么可以自己手动升级 Font Awesome 图标。

手动升级 Font Awesome 图标到 5.0.13 版本

PS:以 Nana 主题为例进行说明,其他主题升级办法类似。

方法一:使用 Font Awesome Free CDN 文件

编辑 Nana\header.php 文件,找到以下代码

  1. <link rel="stylesheet" id="font-awesome-four-css" href="<?php echo esc_url( get_template_directory_uri() ); ?>/fonts/font-awesome.min.css" type='text/css' media='all'/>

修改为

  1. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

即可。

方法二:下载 Font Awesome 文件到本地

1、将 Nana\fonts 文件夹内的所有文件删除,并建立一个空文件夹,命名为 css。

2、打开Font Awesome 官方下载 fontawesome-free-5.0.13,解压 fontawesome-free-5.0.13.zip 文件得到 fontawesome-free-5.0.13 文件夹,将 fontawesome-free-5.0.13\web-fonts-with-css\css\fontawesome-all.css 文件拷贝到我们的主题 Nana\fonts\css 文件夹内,将 fontawesome-free-5.0.13\web-fonts-with-css\webfonts 文件夹全部拷贝到 Nana\fonts 文件夹内。

3、编辑 Nana\header.php 文件,找到以下代码

  1. font-awesome.min.css

修改为

  1. css/fontawesome-all.css

即可。

历史上的今天:

WordPress/zblogPHP免费响应式博客主题Blogs
文章标签: ,   ,  
本文地址:https://www.yigujin.cn/1651.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!

相关文章 分类热门分类热评随机文章

发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

表情

  1. 西枫里博客
    西枫里博客 @回复

    膜拜大佬。

  2. 闲鱼
    闲鱼 @回复

    点赞,用古大佬主题的人都是幸运的,免费还是时刻更新

  3. 神油哥有话说
    神油哥有话说 @回复

    古大神!赞一个!

  4. 暗潮
    暗潮 @回复

    更新主题以后,Font Awesome 字体如何应用,没有搞明白,字体分为Solid、regular、brands三类,但是代码只能用于solid一类的定义,但是对于regular、brands两类应该分布用什么方式调用?

    • 懿古今
      懿古今2018-06-08 17:28  回复

      @暗潮根本无需在意是那个分类,到图标官网看中哪个图标就直接点击获取相应的代码添加即可。

  5. Koolight
    Koolight @回复

    我好久没折腾更新了,熊掌号看大家都玩好久了,但我觉得自己还没弄清楚这是个什么东西……

  6. 青山
    青山 @回复

    博主真是有心了,赞一个

  7. 王望奎博客
    王望奎博客 @回复

    好久没有登录网站的后台了,今天登上看了下有应用更新,第一时间来看看博主的介绍

  8. maqingxi
    maqingxi @回复

    还是就升级图标到 5.0.13 版本吧,这样变动少一点。

    • 懿古今
      懿古今2018-06-07 11:53  回复

      @maqingxi如果目前能用的话不建议升级图标,因为升级图标之后,主题文件中涉及到的部分图标也会失效,需要注意找出修改,如fa改为fas 或 fab

      • maqingxi
        maqingxi2018-06-07 11:54  回复

        @懿古今是的,前两天想加个图标,在网站上取得的代码要短一点,不显示,我用老的代码套用了一下,可以了。那还是暂不修改了。辛苦博主了。