• 注册
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:102 内容:10

    WordPress添加iconfont彩色图标教程「小白专用教程」

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 21
    • wordpress主题
    • 全栈营销师
      官方

      WordPress添加iconfont彩色图标教程「小白专用教程」

      先看看Wordpress添加彩色图标教程Demo:

      WordPress添加彩色图标教程Demo


      大家都知道,wordpress可以支持fontasome字体,但是目前没有彩色图标,用时间久了难免会引起审美疲劳,因此飞小优拿自己的站私下练了练,接下来将操作的WordPress添加彩色图标具体教程分享给大家。

      WordPress添加iconfont彩色图标教程「小白专用教程」

      老样子,操作前需要按照以下清单:

      一、前期准备

      1. 引入外部js代码;

      2. iconfont添加项目;

      3. 引入图标symbol代码;

      1.1 引入外部js代码

      引入代码前需要知道,一般代码是安装在style.css文件里,但是这个是外部引用,因此需要将js引入到

      <head></head>中

      所以具体的步骤就是:添加外部引用代码+添加图标的css代码,以飞优网为例,大家可以看仔细点,我是怎么操作的(细分动作),先登录iconfont官网(注册步骤略),如图:

      WordPress添加iconfont彩色图标教程「小白专用教程」

      按照上面的排序进行各个击破,我这个是已经在前台添加好了一些图标的(你自己喜欢那种自己直接点击加入购物车就行),由于这里我没有写如何添加图标在自己的项目里(感兴趣的可以看我以前的帖子,传送门:wordpress如何添加iconfont图标)。添加完后,按照步骤2将生成的代码直接添加到网站头部区域<head></head>,那么书写代码规则如下:

      <script src="你复制的js代码"></script>

      你也可以将这src地址复制到浏览器中,就是这样的(密密麻麻,可以不用管),这个是在阿里云库里的js,属于公共的外部js库

      WordPress添加iconfont彩色图标教程「小白专用教程」

      JS复制到网站后台区域(自定义css区域,wp后台都有),如下:

      WordPress添加iconfont彩色图标教程「小白专用教程」

      注意这里的只是引入了公共库,这里的地址是随着你不断更新添加icon后而变化,也就是说只要你新增或减少都需要将这里的js更新同步到你的自定义css头部区域,那么你将这些图标输出到哪些地方?那需要怎么做?

      二、彩色图标使用场景

      以飞优网为例,我的使用场景主要在导航上,因此我们需要在添加一段css到自定义css区域或者(style.css),代码如下,

      <style type="text/css">
          .icon {
             width: 1em; height: 1em;/*可以自行调节设置尺寸*/
             vertical-align: -0.15em;/*可以自行调节设置尺寸*/
             fill: currentColor;
             overflow: hidden;
          }
      </style>

      添加后如图,

      WordPress添加iconfont彩色图标教程「小白专用教程」

      好,添加完后,最后一步,直接将目标icon加到导航,那么这里也需要在添加代码:

      <svg class="icon" aria-hidden="true">    <use xlink:href="#你自己的图标代码"></use></svg>

      千万不要忘记了“#”,我之前就忘记了,导致导航出不来效果,那么菜单位置添加如图:

      WordPress添加iconfont彩色图标教程「小白专用教程」

      最后,可以在前台上看看效果:

      WordPress添加iconfont彩色图标教程「小白专用教程」

      方框中的彩色图标是不是很nice呢?操作也是很简单吧,你想不想获得这样的彩色图标呢,按照教程你就可以拥有,操作遇到问题可以在本站留言,小编会及时解答!

      以上教程只针对小白用户,会CSS的其实只是几分钟的事情,更多wp问题知识请关注留言!

      留言下方回复「wp彩色图标」即可获得手把手代码安装教程!

      隐藏内容需要回复可以看见

      回复
      全栈营销师
      官方

      (๑•̀ㅂ•́)و✧

      有任何问题可以骚扰小助手哟!

      回复
      MarTech·新手

      卧槽!无奈本人没文化,一句卧槽行天下!

      回复
      MarTech·新手
      爱心

      迎着风,拥抱彩虹!

      回复
      MarTech·小生
      爱心
      回复
      MarTech·小生
      比心
      回复
      MarTech·新手
      辛苦了
      回复
      MarTech·新手
      比心

      失去故土的花朵,回不去,却也离不开。

      回复
      MarTech·新手
      感谢

      人,百年一世;龙,百年一岁。君生吾已老,君未变,而吾已老。

      回复
      MarTech·小生
      感谢

      冬至子月,证启明兆。倚伏依之。

      回复
      MarTech·小生
      辛苦了
      回复

      请登录之后再进行评论

      登录
      聊天
      关注 88

      推荐圈子

    • 数字营销
      数字营销
      B2B数字营销研究与分析
    • 营销百科
      营销百科
      数字营销专有名词介绍
    • 推式营销
      推式营销
      Outbound Marketing
    • 集客营销
      集客营销
      Inbound Marketing
    • 赚金币
    • 发布
    • 飞优网小程序码 小程序扫码
    • 签到中心
      小黑屋
      举报中心
    • 帖子间隔 侧栏位置: