Iconfont阿里巴巴矢量图本地引用

图片[1]-Iconfont阿里巴巴矢量图本地引用-酒窝博客

前言

iconfont不是维护好久了吗,现在他的在线js库已经不能生成了,当初生成的正常使用,这时候你新加图标什么就得需要用到本地引用,今天博主就简单介绍一下本地引用的办法,非常简单!

引用办法

iconfont的图标有三种引入方式,我们这边着重介绍Symbol的,前两种引入过程会自动去色,变成黑白,Symbol引入可以保持图标原有色彩

1.首先如果你有项目的,在首页点击资源管理?我的项目,找到你当初添加图标的项目

2.下载项目至本地

图片[2]-Iconfont阿里巴巴矢量图本地引用-酒窝博客

3.将下载出来的压缩包解压到本地

图片[3]-Iconfont阿里巴巴矢量图本地引用-酒窝博客

开始引用

到这边我们已经完成了一半了,接下来就是上传js文件和引入了

我们这边只需要用到两个文件,一个 demo_index.html 另一个 iconfont.js

demo_html可以理解为说明文档,里面有你这个库的各种图标已经引入代码

iconfont.js是我们需要导入的js文件

导入文件

iconfont.js上传至服务器

在</body>之前引入代码(如果是WordPress主题等设置中自定义代码,自定义底部HTML代码)

<script src="你的iconfont.js路径"></script>

在</head>之前引入代码(自定义头部HTML代码)

<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>

icon标题ID等在demo_html中看,你用什么方式引用就看什么方式的代码


感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容