首页 WordPress教程正文

WordPress导航栏动态图标设置教程

目前主机吧的 SEO 优化与服务器租用栏目前的动态旋转小图标一直在不停的滚动着,是不是感觉很有逼格,而且更能突出我们想要引导用户进入访问的栏目。

 微信截图_20190612101106.png

而且这些动态图标并不是使用 GIF 图来展现的,不会造成网页加载过慢,那 WordPress 上这些动态旋转的小图标是怎么实现的呢?

其实这两个导航栏的动态旋转小图标的原名应该叫做字体图标(矢量图标),他是一种可缩放的矢量图标,您可以使用 CSS 所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

字体图标(矢量图标)的特性:

 微信截图_20190612101119.png

无需依赖 JavaScript

完全不依赖 JavaScript,因此无需担心兼容性。

无限缩放

无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。

CSS 控制

只要 CSS 支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。

高分屏完美呈现

矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。

完美兼容其它框架

尽管是为 Bootstrap 设计,但同样能与其它框架完美协同运作。

可用于桌面系统

用于桌面系统,或需要一套完整的矢量图。

可适配于屏幕阅读器

与其它字体不同,不会影响屏幕阅读器正常工作。

 微信截图_20190612101052.png

字体图标如何获取?

如何获取字体图标?请在文末点击“了解更多”查看!

心动了吗?别急,下面主机吧来告诉大家 WordPress 的导航栏如何实现动态图标效果,让你的网站逼格满满,瞬间高大上!

WordPress 导航栏动态图标设置

①:我们进入WordPress后台,找到外观选项里的菜单选项,并选取;

 微信截图_20190612101144.png

②:在菜单里我们找到我们需要设置的栏目名字,并黏贴代码(以下操作以主机吧SEO 优化栏目图标设置为例);

 微信截图_20190612101155.png

在导航标签内黏贴字符代码,代码如下:

 <i class="fa fa-cog fa-spin"></i>

PS:

fa-cog:图标的名字,大家在 fa-后面将我们选取的图标名字黏贴就可以了,例如:fa-WordPress(注意这里应该是小写字母),大家需要改动别的图标只需要改动WordPress字段,其它不要更改,否则会有小惊喜!

③:大家进行到这里就可以保存菜单,然后回到我们的网站首页查看相关栏目前的动态图标了,是不是很漂亮?

以上就是今天给大家介绍的WordPress导航栏动态图标设置教程,如果你还想了解更多关于WordPress的知识技巧,可以继续关注我们http://www.touchwordpress.com

评论