WordPress 中引入阿里巴巴矢量彩色图标

WordPress 中引入阿里巴巴矢量彩色图标

阿里巴巴矢量图标库站点 iconfont:https://www.iconfont.cn/

图片[1]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

登录方式有三种,Github、阿里域帐号 (仅限阿里员工使用) 和新浪微博,作为一名合格的互联网从业人员,Github 必不可少,所以建议使用 Github 登录,登录后,在资源管理菜单中选择我的项目子菜单项,在使用之前我们需要创建一个项目,如下所示:

图片[2]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

在上图中,最后两个重中之重,后面我们需要用到,这里就用默认值,至于项目名称,可随便起。完成后接下来便是去搜索你所需要的图标,在搜索框中输入关键词即可,下面是我自己要用到的,如下所示:

图片[3]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

有三种使用方式,分别为 Unicode、Font class 和 Symbol。

Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+ 及所有现代浏览器;
  • 支持按字体的方式去动态调整图标大小,颜色等等;
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色;

Unicode 使用步骤

第一步:拷贝项目下面生成的 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');
}

第二步:定义使用 iconfont 的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">3</i>

Font class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+ 及所有现代浏览器;
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么;
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用;
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的;

Font class 使用步骤

第一步:拷贝项目下面生成的 Font class 代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步:挑选相应图标并获取类名,应用于页面

<i class="iconfont icon-xxx"></i>

Symbol 这是一种全新的使用方式,应该说这才是未来的主流,也是目前推荐的用法。这种用法其实是做了一个 svg 的集合,与上面两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制
  • 通过一些技巧,支持像字体那样,通过 font-size,color 来调整样式;
  • 兼容性较差,支持 IE9+ 及现代浏览器;
  • 浏览器渲染 svg 的性能一般,还不如 png;

Symbol 使用步骤

第一步:拷贝项目下面生成的 Symbol 代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步:加入通用 css 代码 (引入一次就行):

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步:挑选相应图标并获取类名,应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

以上三种介绍及使用步骤来自于官方的使用说明,在这我选择的是第三种主流的用法,因为支持彩色显示,本站使用的是二开的 niRvana 主题 (收费的主题),如果使用第三种方法的话,首先要获取 JS 文件链接,这个链接只需要在项目中生成即可,这里需要注意的一点就是当你新增图标时,JS 链接需要重新生成,获取到所需的 JS 文件链接后,下面就需要在主题中引用,二开的 niRvana 主题为用户提供了自定义的 function.php 文件,在主题的根目录下,名为 custom_function.php,因为 function.php 被加密了,所以主题作者提供了这么一个文件,允许用户通过 WordPress Hook 来定义自己的功能,如下所示:

图片[4]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

相关代码

function add_stylesheet_to_head() {
    echo "\n<script type='text/javascript' src='//at.alicdn.com/t/xxxxxxxxxxxxxxxxxx.js'></script>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );

如果你们主题的 function.php 没加密,可以写在 function.php 中,做好这步后,需要将 css 代码加到 header.php (位于主题的根目录下),如下所示:

图片[5]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

相关代码:

<style type="text/css">
.icon {
    width: 20px; height: 20px;
    vertical-align: -5px;
    fill: currentColor;
    overflow: hidden;
}
</style>

我这里的 css 代码与官方提供的示例有所不同,因为如果我用官方提供的示例,发现显示的图标太小了,已经通过浏览器调试调节好了大小,你们自己也可以去调节,不一定要和官方写的一样,可灵活配置,这一步完了,就剩下最后一步了,在 WordPress 后台中的外观的菜单子选项中,挑选相应图标并获取类名,应用于页面,如下所示:

图片[6]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

相关代码

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-Home"></use></svg> 网站首页

其中 class=”icon” 对应 FontClass/Symbol 前缀,icon-Home 对应图标代码,这也是开头所说的新建项目中后两个重要项。这些完成后,刷新页面等待会就可以显示了,如下所示:

图片[7]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全
图片[8]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全
图片[9]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全

怎么样,是不是比之前黑白的更好看了,嘿嘿 ^_^ !

© 版权声明
THE END
喜欢就支持一下吧
点赞13赞赏 分享
评论 抢沙发

请登录后发表评论