WordPress的好服务器租用网（主机吧）www.fuwuqizuyong.cc 就不在赘述了，大家可以看看国内各行各业的网站有多少是用WordPress搭建的就会知道了，今天服务器租用网为大家带来的是一个关于WordPress导航栏设置动态图标的教程，逼格满满，这是一个能瞬间让你的WordPress网站高大上的教程。
WordPress导航栏动态图标设置教程
在为大家正式写教程前，先来让大家看看服务器租用网（主机吧）的导航栏使用动态图标后的效果图吧！
大家可以看到，目前主机吧的SEO优化与服务器租用栏目前的动态旋转小图标一直在不停的滚动着，是不是感觉很有逼格，而且更能突出我们想要引导用户进入访问的栏目。
而且这些动态图标并不是使用GIF图来展现的，不会造成网页加载过慢，那WordPress上这些动态旋转的小图标是怎么实现的呢？
其实这两个导航栏的动态旋转小图标的原名应该叫做字体图标（矢量图标），他是一种可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
字体图标（矢量图标）的特性：
无需依赖JavaScript
完全不依赖JavaScript，因此无需担心兼容性。
无限缩放
无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。
CSS控制
只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。
高分屏完美呈现
矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。
完美兼容其它框架
尽管是为Bootstrap设计，但同样能与其它框架完美协同运作。
可用于桌面系统
用于桌面系统，或需要一套完整的矢量图。
可适配于屏幕阅读器
与其它字体不同，不会影响屏幕阅读器正常工作。
字体图标如何获取？
🔊获取
心动了吗？别急，下面主机吧来告诉大家WordPress的导航栏如何实现动态图标效果，让你的网站逼格满满，瞬间高大上！
WordPress导航栏动态图标设置
①：我们进入WordPress后台，找到外观选项里的菜单选项，并选取；
②：在菜单里我们找到我们需要设置的栏目名字，并黏贴代码（以下操作以主机吧SEO优化栏目图标设置为例）；
在导航标签内黏贴字符代码，代码如下：
PS：
fa-cog：图标的名字，大家在fa-后面将我们选取的图标名字黏贴就可以了，例如：fa-WordPress（注意这里应该是小写字母），大家需要改动别的图标只需要改动WordPress字段，其它不要更改，否则会有小惊喜！
③：大家进行到这里就可以保存菜单，然后回到我们的网站首页查看相关栏目前的动态图标了，是不是很漂亮？
写到🔊后：
如何设置WordPress导航栏动态图标的文章主机吧小编就为大家分享到这里了，希望能帮助到站长朋友们，也希望站长们多多支持主机吧，这里不仅有网站前端知识，服务器与网站环境搭建教程，还有诸如：SEO优化、主题模板等内容等你来看！
服务器租用网（主机吧）🔊网址：www.fuwuqizuyong.cc
微信扫一扫 
支付宝扫一扫 
