分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解。
 您目前所在位置: 站点首页 » WordPress » 讨论 » 除了Font Awesome的另外一个选择-ICONFONT
+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐

  • WordPress函数介绍-wp_list_bookmarks

    WordPress函数介绍-wp_list_bookmarks

    WordPress函数介绍-wp_list_bookmarks 今天看到百度知道上面有一位用户寻求这方面的帮助,所以我直接将这个函数的注释在官方 ...

    点击查看
  • WordPress初级教程-修改主题底部版权

    WordPress初级教程-修改主题底部版权

    WordPress初级教程-修改主题底部版权 每个WordPress主题的作者为了能让自己的主题为人所知,一般都会在主题的底部附上主题的 ...

    点击查看
  • 我的种子页面是如何制作的

    我的种子页面是如何制作的

    PHP的学习过程可能是艰难的,但是只要你有耐心以及信心,同时配合一个学习手册,我相信无论任何时候,任何问题,你都可以迎 ...

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