分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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

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

 相关推荐

换一批 换一批
  • WordPress站点发布文章遇到500错误解决办法

    WordPress站点发布文章遇到500错误解决办法

    今天遇到这个问题确实是让我觉得很吃惊,毕竟使用了WordPress这么长时间了,我还没有遇到过这个代码错误,但是今天遇到了, ...

    点击查看
  • 登陆后台提示ERROR: Cookies are blocked due to unexpected output.错误解决办法

    登陆后台提示ERROR: Cookies are blocked due to unexpected output.错误解决办法

    今天我折腾主题的时候,保存后台发现保存之后直接空白了,一开始我并没有在意,谁知道这个仅仅是一个折腾的开始。

    点击查看
  • 推荐一组建站需要用到的图标

    推荐一组建站需要用到的图标

    今天看到了这组图标,我个人方面还是很喜欢的,这种圆形图标看上去真心觉得很好很不错,所以推荐给大家,有兴趣的用户可以考 ...

    点击查看
  • WordPress函数介绍-wp_get_attachment_image_src

    WordPress函数介绍-wp_get_attachment_image_src

    前段时间我也接触到了这个函数,今天在贴吧里面也看到了有人询问这个函数,所以我索性就从codex上面引用了相关的教程以及相 ...

    点击查看
  • 已经完成了自己的第一个短代码

    已经完成了自己的第一个短代码

    经过了将近半天的时间,我最终还是完成了自己想要的功能,其中借鉴的太多了,目前这个短代码的基本样式是借鉴了来自bigfa的 ...

    点击查看
  • 花费了下午的时间,我最终还是完成了

    花费了下午的时间,我最终还是完成了

    可能看了标题你并不知道我在说什么,那么请接下来看看我下午的研究结果吧。

    点击查看
  • WordPress函数介绍-the_author_meta()

    WordPress函数介绍-the_author_meta()

    WordPress函数方面太多了,想要每个介绍几本是可能的,而且官方也有相关文档,如果你有兴趣了解的话,可以直接去官方文档查 ...

    点击查看
  • WordPress的301跳转实现方法大全

    WordPress的301跳转实现方法大全

    关于站点的301跳转方面,我相信很多人并不会知道,或者说很多人不知道该如何实现,那么这里提供几种方法给大家。

    点击查看
  • WordPress基础教程-设置类目介绍

    WordPress基础教程-设置类目介绍

    目前基础教程已经基本完毕了,每篇文章都是用自己的语言写出来的,有兴趣查看其他教程的用户可以前往这里查看所有相关教程: ...

    点击查看
  • WordPress输出数据库查询的具体内容

    WordPress输出数据库查询的具体内容

    数据库查询次数一定程度上面会直接影响站点的访问速度以及页面的加载速度,但是有些时候我们并不知道到底进行了哪些数据库查 ...

    点击查看
  • WordPress函数介绍-get bookmark

    WordPress函数介绍-get bookmark

    虽然WordPress基础教程方面还没有完全完毕,但是我觉得基础的东西还是慢慢学比较好,现在我开始学习自己该学习的东西了,也 ...

    点击查看
  • WordPress基础教程-用户类目介绍

    WordPress基础教程-用户类目介绍

    目前基础教程已经基本完毕了,每篇文章都是用自己的语言写出来的,有兴趣查看其他教程的用户可以前往这里查看所有相关教程: ...

    点击查看

  目前有 3 条评论 其中:访客: 2 条, 博主: 1 条

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