• 接51单片机课程设计,价格美丽
  • 这两天买了块51开发板玩玩,比用仿真好玩多了
  • 以后我尽量放蓝奏云上面
  • 博客今天做了一次较大的改动。好长时间没有更新文章了,是因为开学了和做其他站的等等原因,总之现在都差不多忙完了,最近会更新些文章的。
  • 本站正式开启碎语单页,本人的一些碎语会发在这里!

用阿里矢量图标库给网站的导航菜单添加图标

wordpress 六月飞雪 4个月前 (08-20) 1832次浏览 已收录 8个评论 扫描二维码
文章目录[隐藏]

给自己的博客网站添加一个漂亮的导航菜单 ico

效果图

本站导航菜单图标就是用这种方式添加的,当然也有其他的方法,我这里就不一一讲述了。

用阿里矢量图标库给网站的导航菜单添加图标

1.进入阿里巴巴适量图标库官网

链接:http://www.iconfont.cn/
注册登录这些就不讲了。

点击我的项目

 

用阿里矢量图标库给网站的导航菜单添加图标

点击新建项目

Font Family 这个很重要,如图所示,可以改成自己的前缀,然后再点新建就好了。

 

用阿里矢量图标库给网站的导航菜单添加图标
用阿里矢量图标库给网站的导航菜单添加图标

到搜索框搜索图标

比如我输入首页会得到下图。

用阿里矢量图标库给网站的导航菜单添加图标

点击添加入库

 

用阿里矢量图标库给网站的导航菜单添加图标

点击右上角购物车图标

添加至项目刚刚新建的项目 test

用阿里矢量图标库给网站的导航菜单添加图标
用阿里矢量图标库给网站的导航菜单添加图标

点击生成代码

这里每个项目生成的都不一样,要换成自己的。

用阿里矢量图标库给网站的导航菜单添加图标

2.到 wordpress 后台添加代码

注意这里有多种方式添加这段代码
1.如果主题支持添加网站头部代码,直接在那里添加如下代码
注意换成自己的代码


2.主题没有添加头部代码的功能
在外观→编辑→header.php→在下图位置添加
注意换成自己的代码


用阿里矢量图标库给网站的导航菜单添加图标

3.给菜单添加图标

在导航标签输入以下代码保存即可在自己网站首页看到图标效果

<i class="iconfont te-yemian">  首页</i>

class 里面的两个值(iconfont 和 te-yemian)iconfont 是你创建项目时的 Font Family, te-yemian 则是图标代码。

用阿里矢量图标库给网站的导航菜单添加图标

大功告成

用阿里矢量图标库给网站的导航菜单添加图标


乐于分享 , 版权所有丨如未注明 , 均为原创丨本网站采用CC BY-NC-SA 3.0 CN协议进行授权
转载请注明原文链接:用阿里矢量图标库给网站的导航菜单添加图标
喜欢 (5)
六月飞雪
关于作者:
网站搭建请联系!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 六月飞雪
    签到成功!签到时间:2018-08-20 11:06:17,每日打卡,生活更精彩哦~
    doom2018-08-20 11:05 回复 Windows 10 | Chrome 68.0.3440.106
  2. 各位,联系我 我是站长。
    admin2018-08-20 17:37 回复 Windows 10 | Chrome 68.0.3440.106
  3. 诶哟 不错哦~
    匿名2018-08-20 17:40 回复 Windows 10 | Chrome 68.0.3440.106
  4. 六月飞雪
    签到成功!签到时间:2018-08-22 23:18:37,每日打卡,生活更精彩哦~
    doom2018-08-22 23:17 回复 Windows 10 | Chrome 68.0.3440.106
  5. 六月飞雪
    签到成功!签到时间:2018-08-22 23:35:30,每日打卡,生活更精彩哦~
    doom2018-08-22 23:34 回复 Windows 10 | Chrome 68.0.3440.106
  6. 六月飞雪
    签到成功!签到时间:2018-08-23 22:38:09,每日打卡,生活更精彩哦~
    doom2018-08-23 22:37 回复 Windows 10 | Chrome 68.0.3440.106
  7. 一直对于国内的这些东西没信心,总感觉哪天就关了。。
    萌新2018-09-02 16:13 回复 Windows 10 | Chrome 68.0.3440.106
    • 六月飞雪
      额...阿里还行吧,就是可能他的版权是个隐患
      doom2018-09-02 16:16 回复 Windows 10 | Chrome 68.0.3440.106