阿里巴巴矢量图标库站点 iconfont:https://www.iconfont.cn/
![图片[1]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/dc0673c722b7050fb1f22d231f175a95.png)
登录方式有三种,Github、阿里域帐号 (仅限阿里员工使用) 和新浪微博,作为一名合格的互联网从业人员,Github 必不可少,所以建议使用 Github 登录,登录后,在资源管理菜单中选择我的项目子菜单项,在使用之前我们需要创建一个项目,如下所示:
![图片[2]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/5342bd5bc6056721db95e5788e707503.png)
在上图中,最后两个重中之重,后面我们需要用到,这里就用默认值,至于项目名称,可随便起。完成后接下来便是去搜索你所需要的图标,在搜索框中输入关键词即可,下面是我自己要用到的,如下所示:
![图片[3]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/56282a31f151c1d87000c36bbc592d71.png)
有三种使用方式,分别为 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 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/ac1602598ba06f5d016165704f049cba.png)
相关代码
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 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/d19478930df0419e500c7f0c4392d917.png)
相关代码:
<style type="text/css">
.icon {
width: 20px; height: 20px;
vertical-align: -5px;
fill: currentColor;
overflow: hidden;
}
</style>
我这里的 css 代码与官方提供的示例有所不同,因为如果我用官方提供的示例,发现显示的图标太小了,已经通过浏览器调试调节好了大小,你们自己也可以去调节,不一定要和官方写的一样,可灵活配置,这一步完了,就剩下最后一步了,在 WordPress 后台中的外观的菜单子选项中,挑选相应图标并获取类名,应用于页面,如下所示:
![图片[6]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/947d290d28d7c0750992af3d4c358c58.png)
相关代码
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-Home"></use></svg> 网站首页
其中 class=”icon” 对应 FontClass/Symbol 前缀,icon-Home 对应图标代码,这也是开头所说的新建项目中后两个重要项。这些完成后,刷新页面等待会就可以显示了,如下所示:
![图片[7]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/a6bfb6d3f44e743ce2ad9486919ec8ae.png)
![图片[8]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/fc1b54b5a2034be40c01b956ac85fa5b.png)
![图片[9]-WordPress 中引入阿里巴巴矢量彩色图标-零度非安全](https://res.zeronohacker.com/2021/03/72826fa127f5c277a1b45da014e49c85.png)
怎么样,是不是比之前黑白的更好看了,嘿嘿 ^_^ !
请登录后发表评论
注册
社交帐号登录