分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » 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添加评论内容字数限制

    WordPress添加评论内容字数限制

    很久之前我们介绍过,如何添加文章内容字数限制,有兴趣的可以去了解一下: 那么今天给大家介绍的是,如何给WordPress评论内容中添加字数限...

    点击查看
  • Giphypress-WordPress文章内容中添加GIF图片

    Giphypress-WordPress文章内容中添加GIF图片

    看了标题之后,千万不要关闭这个页面,因为这个页面里面的内容可能跟你了解的不一样。 我们都知道 WordPress 可以通过添加媒体来上传 G...

    点击查看
  • 如何自定义WordPress登陆页面背景

    如何自定义WordPress登陆页面背景

    这个功能是一个小功能,但是就我了解到的,目前还是有很大一部分主题都是使用的了这个功能的,所以这里还是简单的介绍一下实现方法。 首先我们看到登...

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