网站前端ICONFONT图标助力网站设计之WordPress应用-♚纪实阁付涛♚

网站前端ICONFONT图标助力网站设计之WordPress应用

说到网站建设就不得不提到前端UI与后端程序

谈到UI就不得不提及美工与设计

在当前这个互联网开放的时代,提到前端美工设计不提及ICONFONT图标的广泛应用,那完全是设计界的盲人;

什么是ICONFONT?

IconFont拆开来看,就是 Icon 和 Font,这样估计大家应该都能理解是什么,那两者结合是什么呢?没错!就是 IconFont !

OK,严肃!简单说,就是我们平时用的字体,不再是我们传统认知上的“文字”,而是一个个的图标

今天我们以Wordpress博客为例进行解释,如何在自己制作的网站里面快速有效的去应用ICONFONT图标,以增强网站的可阅读性及美观欣赏性;

主体默认自带图标的便捷添加

有很多朋友使用与本站完全一样的主题,因制作此主题的作者已经集成了一套ICO库;所以在这里我们可以直接使用,具体如何使用,请看下面步骤:

为了方便本篇文章的截图操作,特在本地搭建了环境并重新安装了Wordpress,所以以下所有截图均为本地环境下的建站截图,非本站现有界面截图

第一步:创建网站主体栏目(忽略截图,自行添加)

第二步:添加至【导航主菜单】,并测试正常显示,如下所示:

第三步:打开下图栏目边上的小三角,并展开如下:

注:

部分用户这个位置的CSS类并没有显示,是因为后台默认是关闭的;开启方法如下:

点击当前页面右上角的【显示选项】,在其中找到CSS类,并在前面打钩即可;

点击【显示选项】

注:设置为自动保存,勾选后直接【显示选项】收缩即可

第四步:当前主题默认用的是【Font Awesome】家的图标,默认格式为:fa fa-android,其中红色部分即为图标的值,在CSS类处直接填写:fa fa-android即可,如果是换其它图标,则直接将对应图标的名称替换此处的android就可以了;

【内容来源于:https://www.diebaosoft.com/】,未经授权,谢绝转载

【Font Awesome官网】:https://fontawesome.com/

因里面的库文件太多,没法一一列表,所以需要哪个自行查找;

比如上方图中,看到自己喜欢的图标,假如为圈起来的两个,那么我们就可以通过以下两个样式来为网站栏目添加两个图标:

fa fa-500px

fa fa-address-card

将以上两个样式分别填写到两个不同栏目分类的CSS类里面去,然后保存就可以在前台显示了;

效果如下:

以上是关于如何利用主题作者已经集成的ICO库来添加图标;如果有更多栏目,只需要寻找更多自己看中的图标,然后按以上方法添加进CSS类即可;

网站集成阿里ICONFONT图标

阿里ICO调用格式:

第一种:icon单个使用

单个图标用户可以自行选择下载不同的格式使用,包括png,ai,svg。
此种方式适合用在图标引用特别少,以后也不需要特别维护的场景。

比如设计师用来做demo原型。
前端临时做个活动页。
当然如果你只是为了下载图标做PPT,也是极好的

 

第二种:unicode引用

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

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

第三种:font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

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

当前我们介绍的方法为了在不改变原主题核心代码的前提下,我们采用第三种办法来进行解释如何便利使用阿里ICO图标;

第一步:打开阿里ICO官网选择意向图标,并【添加入库】

阿里ICONFONT官网:http://www.iconfont.cn

第二步:点击右上角购物车,并选择【下载代码】

第三步:安装代码并调整路径

将下载下来的文件进行解压,找到以下字体文件,并将文字复制到主题根目录下的fonts文件夹里面或者自定义的其它目录,这里我们演示放在网站根目录下的images里面;

为了减少主题CSS文件在容量大小,此处我们就不把ICO的样式直接复制到主题目录下的style.css文件里面,而是直接选择将iconfont.css复制到当前主题根目录下;

注:

此处因为CSS与字体文件不在同一个目录,所以需要手工修改路径

打开iconfont.css文件,找到以下代码:

src: url('iconfont.eot?t=1521552659022'); /* IE9*/
src: url('iconfont.eot?t=1521552659022#iefix') format('embedded-opentype'), /* IE6-IE8 */

以及以下两段代码:

url('iconfont.ttf?t=1521552659022') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1521552659022#iconfont') format('svg'); /* iOS 4.1- */

将其中的iconfont.ttf、iconfont.svg、iconfont.eot路径分别改为:

images/iconfont.ttf、images/iconfont.svg、images/iconfont.eot

第四步:调用样式文件

在网站主题模板里面找到header.php文件,并打开,然后在<head>……</head>之间采用以下代码调用CSS文件;


第五步:为栏目添加CSS类样式;

打开后台【外观】——【菜单】——【栏目】,然后点开【分类目录】边上的小箭头,在阿里官网挑选相应图标并获取类名,应用于页面:

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

其中iconfont icon-xxx红色部分为添加的CSS类代码;“XXX”为对应图标的字符值;这个字符值在我们前面几步下载的iconfont.css文件里面可以看到,打开如下:

调用CSS类代码格式为:iconfont icon-yuwen、iconfont icon-shuxue、iconfont icon-wuli、iconfont icon-youyong、iconfont icon-shetuan、iconfont icon-kaoyan……

最后前端调用效果如下:

因为是本地测试一些细节宽度啥的就没去调整了;具体大家使用中自己慢慢调整样式;

至于现在阿里ICO图标是否允许商用,本人也未知,如果涉及商用的朋友,请自行联系阿里确认版权事宜,本站不对任何人使用阿里图标的所产生的争议承担任何责任;

如果有不懂的,请直接留言,收到信息,会及时回复并给出解决办法。

本文由 ♚纪实阁付涛♚ 作者:谍豹云销 发表,其版权均为 ♚纪实阁付涛♚ 所有,文章内容系作者个人观点,不代表 ♚纪实阁付涛♚ 对观点赞同或支持。如需转载,请注明文章来源。

发表评论