【wordpress美化】RiPro主题给导航菜单添加图标

很多使用RiPro主题的站点,导航菜单前面都有一个小图标,让人看上去很舒服。今天我们一起来实现添加图标、放大图标、旋转图标及高亮旋转图标。

添加图标

图片[1]-【wordpress美化】RiPro主题给导航菜单添加图标-梦楠云

添加图标其实很简单,我们只需进入wordpress后台–外观–菜单设置中,在菜单名称前面添加fontawesome图标的相关标签即可。具体要用哪些图标,我们可以到官网查看,参考实例

<i class="fa fa-html5"></i> 模板主题

全选代码复制

放大图标

与上同理,要调用大图标,我们只需在标签上添加相关参数即可,参考实例:

<i class="fa fa-vimeo-square fa-2x"></i> 精品资源

旋转图标

我们只需要在标签的class中添加fa-spin即可让图标旋转起来,参考实例:

<i class="fa fa-vimeo-square fa-spin fa-2x"></i> 精品资源

高亮旋转图标

如要高亮旋转图标,我们可以打开/wp-content/themes/ripro/assets/css/diy.css,添加如下css代码保存即可。

/*高亮旋转图标*/
.fa-spin {
animation: 2s linear 0s normal none infinite running fa-spin;
color: #2d56fd;
font-weight: 700;
}
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片