所有分类
  • 所有分类
  • 网站源码
  • 办公文档
  • 学习教程
  • 设计素材
  • 软件工具

RiPro如何给菜单添加fontawesome图标

[wm_tips]这许多朋友看到演示站的菜单有图标,不管是显示还是美观都有一定的效果,在这里,我介绍一下如何添给菜单添加fontawesome图标,也就是经常说的 fa fa图标。[/wm_tips]

在外观-菜单-点击要添加图标的菜单展开详情 然后如图,给菜单添加一段图标代码即可:

 

<span><i class="fa fa-home"></i> 首页</span>

主菜单图标设置
<i class="dripicons dripicons-file-code-o"></i> 文档

子菜单图标设置
<i class="dripicons dripicons-chevron-right"></i> word

注意这里有一些细节建议学习下

  1. 图标代码是用<span>标签包裹起来的,这样会避免个别情况下不对齐问题
  2. </i> 后面,有一个空格,这样做的原因是图标和文字不会太拥挤
  3. 具体要用什么图标,可以到http://fontawesome.dashgame.com/  或是 http://demo.amitjakhu.com/dripicons/ 官网去查找即可,将自己喜欢的图标代码替换即可
  4. <span><i class=”fa fa-图标代码”></i> 菜单名称</span>
  5. <i class=”dripicons dripicons-home”></i> 菜单名称
  6. <i class=”fa fa-ellipsis-h”></i> 关于<span class=”vip”>需求订制</span></a>

 

WordPress 美化:一行代码让你的菜单图标旋转起来

逛博客的时候发现有的博客的菜单有一个图标一直在转,觉得很不错。于是我就用 firebug 查看了下样式,把这个样式添加上就可以让你的小图标旋转起来。

在主题的 css 中加如下代码:

  1. .fa-spin {
  2.     animation: 2s linear 0s normal none infinite running fa-spin;
  3. }

然后再菜单里,将.fa-spin添加到菜单中。然后就可以看到图标旋转了

  1. <i class=“fa fa-wordpress fa-spin”></i>

 

原文链接:http://www.mywechatmall.com/blog/riprofontawesome/,转载请注明出处。

0

评论0

在线客服
在线客服
热线电话
小微资源网为您提供丰富的学习教程,学习资料,技术教程,技术资料,资料下载等资源,让您学习找资源更轻松。
没有账号?注册  忘记密码?