• 服务器租用:建站教程、SEO优化文章、网站模板、服务器软件、云服务器国外服务器香港服务器虚拟主机域名注册、服务器相关知识。
  • 主机吧永久网址为:https://www.fuwuqizuyong.cc
  • 如您无法通过百度搜索到本站时,请更换搜索引擎,或者直接在浏览器地址栏输入 www.fuwuqizuyong.cc 即可回到本站
  • 浏览更多精彩内容,请 Ctrl+D 将本站加入浏览器收藏夹。

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 导航栏动态图标设置教程 网站瞬间高大上

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

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

PS:

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

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

写到最后

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

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


服务器租用(www.fuwuqizuyong.cc) , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明:WordPress 导航栏动态图标设置教程 网站瞬间高大上
服务器租用
喜欢 (5)
[]
分享 (0)
服务器租用
关于作者:
服务器租用专注为广大站长与网友朋友分享建站教程、SEO优化文章、网站模板资源、服务器软件(Web环境、建站程序)等,另外为大家推荐各种国内外服务器、香港服务器、虚拟主机、域名购买优惠信息与服务器相关知识。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到