分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 讨论 » 除了Font Awesome的另外一个选择-ICONFONT
+

除了Font Awesome的另外一个选择-ICONFONT

现在很多主题方面都是使用的Font Awesome的图标,这个站点的图标多而广,而且功能方面都是比较晚上的,但是前几天,一个朋友无意间介绍了另外一个图标库给我,我折腾了一天,尝试把站点图标更换一边,但是失败告终。

这篇文章主要就是想告诉大家如何使用这个新的图标库,以及相关问题。

图标库的名字是ICONFONT,据我所知是阿里巴巴旗下的一个矢量图标站点,那么这个站点里面的图标数量确实是非常多,但是数量多并不代表好用,我是这么认为的。

进入站点之后界面就是下面的图片了:
除了Font Awesome的另外一个选择-ICONFONT-BanYuner

使用方法方面我这里简单的说一下,因为官方的介绍文章以及使用方法已经算是比较详细的了,我简单的说明一下即可。

首先我们需要搜索自己需要的图标,我这里随便搜索一个“每天”,那么出现如下界面:
除了Font Awesome的另外一个选择-ICONFONT-BanYuner

  • 1:购买此图标,其实说白了就是选中这个图标之后就会变色,没有什么好说的
  • 2:收藏此图标,收藏功能一般登陆后可用
  • 3:单独下载此图标
  • 4:将你选中的图标收藏为一个项目,存储在阿里云CDN上面,这个功能我没有尝试过
  • 5:将图标的相关文件下载到本地以供调用
  • 6:个人选中的图标会在这个里面显示

前端的同学可以从平台上下载到:ttf、woff、eot、svg等矢量格式的图标文件,应用到页面开发中去,还有更多功能方面,大家可以尝试去官方的帮助页面查看:点击前往

那么图标下载之后,会是一个压缩包文件,我们点开压缩包文件之后,会看到下面这几个文件:
除了Font Awesome的另外一个选择-ICONFONT-BanYuner

那么我们需要做的事情就是将下面的文件上传至自己的服务器中去:

  • iconfont.eot
  • iconfont.svg
  • iconfont.ttf
  • iconfont.woff

那么这四个文件你上传到哪里就看个人自定义了,但是不管你上传到了哪里,你都需要在iconfont.css中修改文件的路径:
除了Font Awesome的另外一个选择-ICONFONT-BanYuner

修改了路径之后我们需要引入这个CSS文件,之后使用调用代码调用里面的图标即可。

调用代码方面,官方给的代码如下:
除了Font Awesome的另外一个选择-ICONFONT-BanYuner

但是经过我尝试,发现是错误的,少了一个icon,那么完整的调用代码如下:

<i class="icon iconfont">调用参数</i>

调用参数方面就是下面图片中红色箭头部分显示的,你可以打开文件夹中的demo.html即可:
除了Font Awesome的另外一个选择-ICONFONT-BanYuner

那么整个流程方面就是这样的了。我个人描述方面可能存在一定的不明确,如果有问题大家可以留言告知。

同样的,如果你不是一个喜欢折腾的人,那么这篇文章你看看就可以了,因为如果你打算折腾这个内容,那估计也不是一时半会的事情了。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
除了Font Awesome的另外一个选择-ICONFONT
支付宝(点击图片切换)
扫码,支持我
除了Font Awesome的另外一个选择-ICONFONT
微信(点击图片切换)
扫码,手机看
除了Font Awesome的另外一个选择-ICONFONT
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • 七牛图片瘦身功能效果如何

    七牛图片瘦身功能效果如何

    已经较长时间没有使用七牛来存储图片了,使用了一段时间之后,发现流量确实是飙升,有点耗不起,所以直接取消了,但是今天看 ...

    点击查看
  • WPJAM Basic插件导致文章内JS地址改变问题修复

    WPJAM Basic插件导致文章内JS地址改变问题修复

    WPJAM Basic插件是我一直在使用的插件,其实这个插件就是将很多功能整合起来了,使用的原因就是因为它将其整合起来了,所以 ...

    点击查看
  • WordPress函数教程-get the time

    WordPress函数教程-get the time

    函数教程方面很少介绍了,因为我个人觉得WordPress官方的Codex已经介绍的很详细了,但是可能是英文的问题,所以很多人并不想 ...

    点击查看
  • WordPress函数介绍-時間和日期格式

    WordPress函数介绍-時間和日期格式

    下面的内容来自Codex官方,有兴趣的可以前往官方站点了解详情:

    点击查看
  • WordPress获取指定文章相关信息函数

    WordPress获取指定文章相关信息函数

    之前我写了一篇文章,是利用短代码来实现获取指定文章内容的功能,那么那个功能其实只是我即将介绍的内容中的很小一部分,介 ...

    点击查看
  • 如何改进你的WordPress导航栏

    如何改进你的WordPress导航栏

    很久之前我使用DUX主题的时候,我就开始想要着手准备它的导航栏了,但是说实话,那个时候能力有限,根本不知道如何开头,也 ...

    点击查看
  • 帅气小琦琦
  • 痞子大神
  • 卢松松博客
除了Font Awesome的另外一个选择-ICONFONT
7 + 0 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 2楼
    痞子大神
    签到成功!签到时间:2016-08-26 15:11:44,每日打卡,生活更精彩哦~
    痞子大神 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 广电网 5个月前 (08-26)回复
  2. 1楼
    卢松松博客
    从百度点进来的,支持一下,希望站长您多出一些好文章。
    卢松松博客 来自天朝的朋友 谷歌浏览器 Windows 8.1 四川省 广电网 5个月前 (08-26)回复