wordpress阿里图标引入应用到网站详细步骤

打开官方网址:iconfont-阿里巴巴矢量图标库

注册账号步骤跳过

搜索图标,比如通知之类就搜通知

选择一个项目,项目后期添加图标都不要变,没有项目可以创建一个项目出来

然后进入项目

然后会得到一个压缩包

解压到桌面

然后进入自己网站后台

新建一个文件夹用于储存图标文件

将解压出来的全部上传进来

然后打开此文件

打开网址会看到自己的项目图标

划到底部

第一步,引入代码到header.php(主题页眉)

<script src="/alitubiao/iconfont.js"></script>

此处是你js文件的路径,不知道啥叫路径的话百度下吧,很好理解的

第二步:加入通用 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>

最后一步,进入菜单或者其他页面运用代码即可

前面代码后面需要的文字即可

每一次从图标库添加新图标,都需要下载文件到本地然后去网站目录去替换那些文件即可

全部覆盖上传就可以了!

部分文章/资源来源于网络,文章标题下部均已标注来源,如有侵权,请点击此处联系客服进行删除,本站将会在第一时间内进行处理! 

如果您要搬运本站文章,请在文章底部标注

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

如果文章帮助到您,还请您点击一下广告支持本站一下! 如果本帖存在的内容对您和您的利益产生损害,请立即通知我,将在最短时间内对其做出处理.本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负.

给TA饼干
共{{data.count}}人
人已饼干
7b2美化

Pc区块菜单添加7b2

2022-10-7 10:28:01

7b2美化

7b2美化滚动条七彩色

2022-10-7 10:40:54

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