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