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

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

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

引用方法:

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

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

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

 

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

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

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

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

 

 

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


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

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

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

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

已有3人支付

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
在线图床 网址缩短 积分获取 积分素材
官方客服
  • 官方客服:205432983一键联系
  • 扫一扫加站长微信
    官方QQ群