网站导航栏菜单文字图标的设置方法(单色+彩色)

最近在接日主题暗黑版的美化时候,发现很多人彩色图标会用到网站其他结构部位,但是不会用到导航菜单里!

以及群里说用我上一篇文章引用图标的方法放到导航栏文字旁就会变得很大,然后教程有误,我觉得有必要写一下文章来说明一下了,图标很大,不是因为教程错误,而是我上一篇教程引用方法是首页优设四格图标的方法。。。。所以这次是导航栏的引用(虽然是一样的,只是css设置不一样),下面进入正题,直接说教程:

引用方法:

01.进入网址—https://www.iconfont.cn/

02.注册登录——选择菜单的“图标管理”,接着选择子菜单的我的项目,看截图:

网站导航栏菜单文字图标的设置方法(单色+彩色)
登录注册
网站导航栏菜单文字图标的设置方法(单色+彩色)

03.按照以上的截图直接创建完了项目之后,返回首页;
——选择自己喜欢和需要的图标,鼠标移动到图标上;

——图标第一个就是购物车,选择购物车图标不停的添加图标之后;

——看右上角的购物车图标,点击以下,右侧弹出选择添加图标到哪个项目,然后选择你自己要添加的项目即可

网站导航栏菜单文字图标的设置方法(单色+彩色)

04.然后就会生成阿里图标引用链接,彩色图标上次写过了,这次案例为单色图标!单色图标选择Font class


05.更新图标,生成链接,项目链接的引用方法为

——单色图标引用链接    ,第二处是彩色的

<link rel="stylesheet" href="font-class的项目地址链接替换处">

<script src="Symbol的项目地址链接替换处"></script>

给TA买糖
共{{data.count}}人
人已赞赏
网站教程

柒比贰主题使用子主题用户中心背景空白解决办法

2019-6-6 16:12:02

网站教程

wordpress文章末尾版权提示框+本文结束图标

2019-6-23 3:00:53

6 条回复 A文章作者 M管理员
  1. 来点积分啊 ✗哭了✗

  2. ✗哭了✗ 没积分了

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索