怎么给wordpress主题添加菜单字体图标

2017年9月24日11:40:29 发表评论 173

目前字体图标非常流行,效果看起来确实不错,最近把沃森博客也给捣鼓上了。大家来试试、来折腾折腾。效果图如下:

怎么给wordpress主题添加菜单字体图标

怎么给wordpress主题添加菜单字体图标效果图

一、与图片相比优点

跟图片相比,icon字体图标是矢量的字体,所以我们可以对它使用所有能对普通字体生效而图片做不到的css样式,比如支持视网膜显示、无损放大(定义font-size)等等,具体请看下面列出的这些:

  1. 自由的变化大小
  2. 自由的修改颜色
  3. 添加阴影效果
  4. 低版本IE(6+)都能支持
  5. 支持透明度和旋转等等
  6. 可以添加text-stroke和background-clip:text等

 

二、属性具体实现方法如下

1、WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。

2、打开图标字体官网(传送门:fontawesome.io/icons/),找到需要的图标,记录下名字。

如分享图标 的名称是share-alt,那么我们就需要在菜单CSS类中输入fa share-alt就可以了,其他图标也是同样的办法(也可以直接点击该图标后在出现的页面中的<i class="fa fa-share-alt" aria-hidden="true"></i>复制fa-share-alt)。

怎么给wordpress主题添加菜单字体图标

3、WP后台---外观---菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入一个图标字体名称,然后记得保存菜单。如果在编辑菜单项目面板中无CSS类,打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。如下图所示(点击看大图):

怎么给wordpress主题添加菜单字体图标

PS:知更鸟主题不用装Font Awesome 4 Menus插件,已集成。直接操作后面步骤即可。

当然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。

如果认为上面插件提供的图标字体不符合自己的要求(其实这套Font Awesome图标字体早已烂大街),还可以自己做一套更加个性化的图标字体。

图标字体在线制作:https://icomoon.io/app/#/select

至此,怎么给wordpress主题添加菜单字体图标就说完了,去折腾吧

历史上的今天:

  • 博主微信
  • 赶快加我来聊天吧
  • weinxin
  • 站长技术资源群
  • 群号:483950522
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: