远方的海
远方的海,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. AnnaArtoklJeoto :

    修建中俄两个大国(龙和熊)精神象征联合的纪念碑。
    投票。 此处必须建立提醒我们后代铭记中俄相互关系伟大历史的“中国和俄罗斯——万世友好”纪念碑!
    http://www.cn1ru.com

    2017-6-10
  2. Randyreaws :

    Lose up to 23 pounds of pure body fat in just 3 weeks!, how did i do that?
    The 3 Week Diet is an extreme rapid weight loss program that can help you lose up to 23 pounds of pure body fat in just 3 weeks! Get your customized diet plan from our official website and find out which foods you should be eating if you want to burn your belly fat away fast! Created by acclaimed personal trainer and nutritionist Brian Flatt, The 3 Week Diet is 100% guaranteed to deliver results!
    look great? dont waste your time! lets do this, join with us and bet back your beautiful body at here:

    http://tinyurl.com/jblsnuj

    Thx

    2017-2-13
  3. 次克 :

    为什么我调用不出来?

    2016-1-16
  4. mrjucn :

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

    2015-11-16
    • Sven水神 :

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

      2015-11-16
  5. 小鸟 :

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

    2015-8-27
    • Sven水神 :

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

      2015-8-27
  6. 拼命玩 :

    好东西

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

    好像又换主题了!

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

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

      2014-9-20
  8. BigCat :

    没啥用啊

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

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

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

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

      2014-9-19