【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

WordPress利用阿里巴巴矢量图标库美化菜单栏图标教程,附懒人教程和B2教程。

介绍:

想和奇妖网一样美化自己的菜单栏吗?今天小编微尘来带给大家详细的教程。

教你如何调用阿里巴巴矢量图标库来美化自己的网站。

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

1.打开阿里巴巴矢量图标库的网站,去注册账号,这里不多介绍

阿里巴巴矢量图标库直达车:点击直达

2.搜索你想要的图标,比如电脑,美食,花花,曹操。

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

3.找到喜欢的图标后,点击那个图标,点击购物车,然后添加到项目(没有项目的随便创一个)

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

4.然后找到资源管理–我的项目–下载至本地。

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

5.在服务器创建一个放图标的文件夹,比如我起名叫alitubiao,前面下载的上传上去然后解压出来。

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

6.解压出来后,自己根据情况移动文件,直接把里面的东西移动到你创建的图标文件夹。

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

7.注意上图的demo_index.html文件,访问你的域名/你的图库文件夹名/demo_index.html  ,打开就是你引入好的图标库了

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

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>

图:

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

10.教程到这里就基本结束了,直接把下面的代码填到你的网站菜单里就行了,下面放调用代码演示

注意:是填到文字前面。

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

【网站美化】WordPress调用阿里巴巴矢量图标库美化菜单栏图标教程

11.上面的如果已经操作完了,这里的就不需要看了,这是一个懒人用法,几乎适合大部分的主题,一秒搞定,下面放b2的演示

PS:想看就评论,不要白嫖,有条件的可以点点赞赏,下面放演示

给TA打赏
共{{data.count}}人
人已打赏
技术教程电脑软件网赚项目自我进步资源分享

【抖音项目】无人直播 动漫解说项目 附【高清视频素材+详细教程】

2022-9-23 18:00:35

技术教程网站优化

【收录优化】WordPress博客发布文章后自动推送到百度站长平台代码

2022-9-24 20:03:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
本站托管于柠檬云柠檬云