1. 服务器吧首页
  2. 网站建设

WordPress导航栏动态图标设置教程 网站瞬间高大上

WordPress导航栏动态图标设置教程 网站瞬间高大上

WordPress的好服务器租用网(主机吧)www.fuwuqizuyong.cc 就不在赘述了,大家可以看看国内各行各业的网站有多少是用WordPress搭建的就会知道了,今天服务器租用网为大家带来的是一个关于WordPress导航栏设置动态图标的教程,逼格满满,这是一个能瞬间让你的WordPress网站高大上的教程。

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

在为大家正式写教程前,先来让大家看看服务器租用网(主机吧)的导航栏使用动态图标后的效果图吧!

WordPress导航栏动态图标设置教程 网站瞬间高大上

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

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

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

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

WordPress导航栏动态图标设置教程 网站瞬间高大上

无需依赖JavaScript

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

无限缩放

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

CSS控制

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

高分屏完美呈现

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

完美兼容其它框架

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

可用于桌面系统

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

可适配于屏幕阅读器

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

WordPress导航栏动态图标设置教程 网站瞬间高大上

字体图标如何获取?

点击获取

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

WordPress导航栏动态图标设置

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

WordPress导航栏动态图标设置教程 网站瞬间高大上

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

WordPress导航栏动态图标设置教程 网站瞬间高大上

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

PS:

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

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

写到最后

如何设置WordPress导航栏动态图标的文章主机吧小编就为大家分享到这里了,希望能帮助到站长朋友们,也希望站长们多多支持主机吧,这里不仅有网站前端知识,服务器与网站环境搭建教程,还有诸如:SEO优化、主题模板等内容等你来看!

服务器租用网(主机吧)永久网址:www.fuwuqizuyong.cc

原创文章,作者:服务器租用,如若转载,请注明出处:https://www.fuwuqizuyong.cc/2008.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

点击联系

在线咨询:点击这里给我发消息

联系我们:https://www.fuwuqizuyong.cc/lianxi

工作时间:周一至周五,9:30-18:30,节假日休息

QR code