WordPress添加使用Icomoon小图标

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]

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

选择icomoon图标

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

选择icomoon图标

制作Font文件

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

icomoon2

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

加载css,使用icomoon小图标

  1. 首先把style.css里面的内容复制到当前使用的wordpress主题的style.css中。
  2. 把font整个文件夹复制到当前的主题目录下。

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

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

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

以上。

转自:远方的海 http://www.seavia.com/wordpress/wordpress-adds-icomoon.html

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> WordPress添加使用Icomoon小图标”。在页面右边可以分享本文哦!

有 4 发吐槽 关于 “WordPress添加使用Icomoon小图标

  1. 沙发
    ScottJu 2015-11-15
    里面需要的小图标找不到怎么办,比如新浪微博,QQ,什么的。
  2. 板凳
    BeautifulDays 2016-05-23
    我按照你的方法试试了,但是在导航栏还是现实不了图标啊
    • 回复
      Timle.CN 2016-05-24
      @BeautifulDays 可以正常实现的哈,fonts文件夹放到主题文件夹根目录下。加载css文件,然后在需要显示的地方调用图标标签即可。
  3. 地板
    河河海 2016-08-17
    我刚刚也正好在搜索这样的文章,发现一个 wordpress 插件 Font Awesome 4 Menus,感觉蛮简单的的插件。Tim可以看看。

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

WordPress添加使用Icomoon小图标
3 票, 5.00 平均等级 ( 99% 分 )