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

 懿古今   2022-10-02 17:45:48 更新  技术文档

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张 - 懿古今(www.yigujin.cn)

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）找到自己喜欢的图标，然后点击该图片后获得类似以下代码：

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

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

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

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

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

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

<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'/>

修改为

<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 文件，找到以下代码

font-awesome.min.css

修改为

css/fontawesome-all.css

即可。

本文地址：https://www.yigujin.cn/1651.html

你可能感兴趣的文章

文章标签： ,   ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！

发表评论

  1. maqingxi
    maqingxi @回复
    发表于2018-06-07 11:36  沙发

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

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

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

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

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

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

          @maqingxi我的站点稳定之后很少去改菜单和图标，懒得折腾

  2. 王望奎博客
    王望奎博客 @回复
    发表于2018-06-07 17:10  板凳

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

    • 懿古今
      懿古今2018-06-08 10:54  回复

      @王望奎博客[呲牙] 如果站点已经正常运行不折腾的话，升不升级都无所谓的，毕竟这次只是小升级

  3. 青山
    青山 @回复
    发表于2018-06-07 17:24  地板

    博主真是有心了，赞一个

    • 懿古今
      懿古今2018-06-08 10:53  回复

      @青山[呲牙] 偶尔折腾一下，保持激情

  4. Koolight
    Koolight @回复
    发表于2018-06-07 22:50  4楼

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

    • 懿古今
      懿古今2018-06-08 10:53  回复

      @Koolight我的熊掌号也就是博客发布文章顺便推送过去而已，其他就不折腾了

  5. 暗潮
    暗潮 @回复
    发表于2018-06-08 14:57  5楼

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

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

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

  6. 神油哥有话说
    神油哥有话说 @回复
    发表于2018-06-09 17:50  6楼

    古大神！赞一个！

  7. 闲鱼
    闲鱼 @回复
    发表于2018-06-09 21:12  7楼

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

  8. 西枫里博客
    西枫里博客 @回复
    发表于2018-06-10 02:04  8楼

    膜拜大佬。