远方的海
远方的海,WordPress,免费
2014 Sep 19 04 : 20

WordPress添加使用Icomoon小图标

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

本文介绍给Wordpress的导航菜单或者文章中引用添加Icomoon小图标。首先什么是Icomoon小图标,可以参考上面导航菜单前面的那些图标就是了。这些IcoMoon图标还可以做表情    查看方法,icomoon实际上是一个可以灵活调用的字体库,下面介绍如何使用icomoon图标:

选择icomoon图标

首先进入icomoon app界面点击前往选择你想要添加的图标

Wordpress添加使用Icomoon小图标

制作Font文件

选择完毕后,点击下侧的Font。我们得到一个有e600之类的每个小图标的标识码,建议把这个页面截图保存,以后用的时候就知道自己需要调用哪个标识码了!

Wordpress添加使用Icomoon小图标

保存字体文件点击download,解压文件会得到一个文件夹。这个文件夹看似东西挺多,实际上我们只需要几个文件。

加载css,使用icomoon小图标

使用icomoon很简单,只需要2个步骤,如下:

  1. 首先把style.css里面的内容复制到当前使用的wordpress主题的style.css中。
  2. 把fonts整个文件夹复制到当前的主题目录下,里面有eot, svg, ttf, woff这四个文件。

调用方法,以<span>标签调用,格式如下:

<span class="icon-name"></span>
//注:icon-name是根据图标的名字来的,比如下面我使用的用户图标是icon-user。

另外一种调用方法,格式如下,给出css代码:多用于:before样式。

content:"/e500";
font-family:'icomoon';

效果展示这是一个user的icon:

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress 前端

您可能也会喜欢

发表回复

Post Comment


  1. 次克 :

    为什么我调用不出来?

    2016-1-16
  2. mrjucn :

    里面需要的小图标找不到怎么办,比如新浪微博,QQ,什么的。

    2015-11-16
    • Sven水神 :

      @mrjucn 都是可以找到的,在里面使用搜索工具,默认关键词为sina, qq, weibo即可出现相应的图标。

      2015-11-16
  3. 小鸟 :

    请问下 这个字体 如何才能在 导航菜单的CSS样式哪里进行调用?

    2015-8-27
    • Sven水神 :

      找到你要加的那块,比如是个class为123的div什么的,css属性里面加个123:before,具体的文章里有哦。

      2015-8-27
  4. 拼命玩 :

    好东西

    2014-11-20
  5. 免费部落 :

    好像又换主题了!

    2014-9-20
    • 远方的海水神 :

      没换主题(^。^)我只是把它修改了一下(其实也相当与换了

      2014-9-20
  6. BigCat :

    没啥用啊

    2014-9-20
  7. 免费部落 :

    我最开始也搞了这个,后来撤了!

    2014-9-19
    • 远方的海水神 :

      为什么撤了,觉得蛮好的呀。

      2014-9-19