分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » WordPress » 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
    匿名

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

    除了Font Awesome的另外一个选择-ICONFONT
    3 + 1 =
    1. 2楼
      痞子大神
      最后评论时间:2017/07/11 17:25
      来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 广电网
      签到成功!签到时间:2016-08-26 15:11:44,每日打卡,生活更精彩哦~
      痞子大神 3个月前 (07-11)回复
    2. 1楼
      卢松松博客
      最后评论时间:2016/08/26 14:47
      来自天朝的朋友 谷歌浏览器 Windows 8.1 四川省 广电网
      从百度点进来的,支持一下,希望站长您多出一些好文章。
      卢松松博客 1年前 (2016-08-26)回复