当前位置:首页>WordPress>网站美化>wordpress阿里图标引入应用到网站详细步骤

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>

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

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

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

全部覆盖上传就可以了!

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

如果您要搬运本站文章,请在文章底部标注。侵删请致信:663829289@qq.com

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

图床支持:https://space.simao58.cn/

如果文章帮助到您,还请您点击一下广告支持本站一下!

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