关注VPS服务器
相关知识分享

Avada主题导航菜单icon图标如何添加?

Avada主题导航菜单图标如何添加?有时候看到别人网站导航菜单的小图标很精美,这叫 icon图标。加上之后整个网站的感觉立马就不一样了,自己也想加一个。在 avada主题菜单添加图标很容易,本文中老魏分享详细操作过程。

Avada主题导航菜单图标添加方法有内置和自定义添加两种,下面分别介绍。

如下图所示是菜单添加图标的效果,这些图标是avada主题内置的,我们只要挑选合适的图标就可以了。avada主题的icon图标展示

avada主题的icon图标展示在 wordpress后台 appearance外观 > menus 菜单中已经添加了 home,about,products,contact等几个菜单,点击右侧向下的三角箭头并点击 Avada Menu Options。

avada主题 menu options

avada主题 menu options

弹窗中找到 Icon Select,根据导航菜单文字的含义挑选要设置的 icon图标。

avada主题 icon select

avada主题 icon select

你看到的 icons图标来源于 Fontawesome Icons,不满意可以去官网找。

如果想调整默认 icon 位置、大小、颜色、就去 Avada > Options -> Menu -> Main Menu Icons 中设置。

avada主题Main Menu Icons

avada主题Main Menu Icons

Main Menu Icon Position设置 icon在文字的上右下左哪个方位,一般选Left符合大多访客的浏览习惯。

  • Main Menu Icon Size 设置 icon大小,滑动改变图标大小;
  • Main Menu Icon Color 设置 icon颜色,打开网页后鼠标还没有移上去的颜色;
  • Main Menu Icon Hover Color 设置鼠标移到菜单 icon的颜色;
  • Mega Menu Thumbnail Size 一级(顶级)菜单如果开启了 Mega Menu,是可以设置自定义图片的,这个设置用来定义Mega Menu自定义上传图片的展示尺寸,一般情况下,两个数值都改成 18px或与旁边 icon大小一样的正方形会更美观。实际从 Icon Select库中往往不容易找到与产品匹配的图标,那么可以自定义上传图片。上传路径是 Icon Select 图标库下面的 Mega Menu Thumbnail 点击 upload。老魏的经验是先在本地处理好正方形矢量图片,尺寸控制在50px*50px以内。如下图所示 product前面的图标就是自定义上传的图片。
avada主题自定义导航栏图标

avada主题自定义导航栏图标

安装 Avada主题前提条件

1、教程使用的国内服务器 1核1g从实际使用来看速度并不快。如果你是学习的话,选择 1核2g配置的服务器起步,如果用 avada主题建站要使用 2核4g配置,这样才能运行流畅。

国内服务器:阿里云腾讯云(都有代金券,付款时抵用省钱)

国外服务器:点我登陆 Vultr 主机

不知道如何选择地域、配置请在页面右侧+老魏的联系方式,我们一起研究。

2、如果是学习 Avada主题,那么也可以不用域名,直接用服务器IP当做网站域名使用。

如果是用来建站,那么就要注册域名了。主要用户是老外的话(外贸网站、B2C/C2C等),建议在国外注册,不要在国内注册。打开namesilo官网,在搜索框里输入要注册的域名,选择好之后注册,付费之前记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。

3、Avada主题

是themeforest中销量第一的wordpress主题,那里面有上万个国外主题销售,感兴趣可以点我去看看。目前在 themeforest上面这款主题是一次付款终身使用,和别的主题一年一付费的情况相比还是蛮划算的。付费后拿到注册密钥留用。

4、建站面板。老魏在本文中使用了宝塔面板,多亏宝塔的可视化操作界面,部署avada主题才这么快速。点我领取宝塔官方赠送 3188元优惠券礼包。新用户可享受0.99元体验1个月专业版。

5、siteground虚拟主机是 wordpress官方推荐的主机,与 wordpress是天生一对。老魏在实际使用当中发现 siteground虚拟主机上面的 wordpress网站速度、稳定性都很棒,而且在国外测试评分网站的得分也很高,如果你打算长期运行外贸网站,老魏强烈建议选择 siteground虚拟主机。

如果你要做外贸网站,点我打开 siteground去注册一个新账号,开始你的外贸建站之旅吧。

关于 siteground建站:siteground专题

本文是全系列中第13 / 23篇:Avada

赞(0) 打赏
允许转载,保留出处:魏艾斯笔记 » Avada主题导航菜单icon图标如何添加?

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏