介绍:
想和奇妖网一样美化自己的菜单栏吗?今天小编微尘来带给大家详细的教程。
教你如何调用阿里巴巴矢量图标库来美化自己的网站。
1.打开阿里巴巴矢量图标库的网站,去注册账号,这里不多介绍
阿里巴巴矢量图标库直达车:点击直达
2.搜索你想要的图标,比如电脑,美食,花花,曹操。
3.找到喜欢的图标后,点击那个图标,点击购物车,然后添加到项目(没有项目的随便创一个)
4.然后找到资源管理–我的项目–下载至本地。
5.在服务器创建一个放图标的文件夹,比如我起名叫alitubiao,前面下载的上传上去然后解压出来。
6.解压出来后,自己根据情况移动文件,直接把里面的东西移动到你创建的图标文件夹。
7.注意上图的demo_index.html文件,访问你的域名/你的图库文件夹名/demo_index.html ,打开就是你引入好的图标库了
8.引入教程
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
9.WordPress博客怎么引入呢?复制上面第一步的代码到主题文件header.php(主题页眉里),把js引入
详细路径:/wp-content/themes/你的wp主题文件夹/header.php
引入js代码实例(这是以我网站为准的,你上面创建的图标文件夹名字是哪个就改成哪个):
<script src="/alitubiao/iconfont.js"></script>
加入css代码,这个去WordPress博客后台—外观—自定义—-填到额外CSS里:
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
图:
10.教程到这里就基本结束了,直接把下面的代码填到你的网站菜单里就行了,下面放调用代码演示
注意:是填到文字前面。
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
11.上面的如果已经操作完了,这里的就不需要看了,这是一个懒人用法,几乎适合大部分的主题,一秒搞定,下面放b2的演示
PS:想看就评论,不要白嫖,有条件的可以点点赞赏,下面放演示