vue使用阿里图标库,vue使用icon
本文主要介绍VUE在线调用阿里Iconfont logo库的方法。内容围绕VUE前端和阿里Iconfont logo库。它已经经历了从网站上拼凑图标的时代。大概15~16年前，我开始取消阿里Iconfont logo库。刚开始我只下载图标用。有需要的朋友可以参考一下。
前言
很多年前，我曾经是一个服务器端小白。随着行业的发展，我被熬成了前端小白。开玩笑的，但是我更喜欢学技术！本章将带领大家以另一种高端的方式打开阿里iconfont logo库。以前我们要么在网络上花大力气，拼凑一些图标图片来美化自己的网页。但是随着技术的发展，加上一些大平台的技术投入，不得不说阿里还是很牛逼的。这不是赞美它，宣传它。的确，别人在某些方面比某个滕做得更好。也可能和领域有关。我只能这么想，因为我个人的认知水平。比如我们的JAVA服务器方向，阿里有Nacos、Canal、RocketMQ、Dubbo、Sentinel等一些开源技术。回到正题。看标题。本章内容围绕VUE前端和阿里Iconfont logo库展开。它经历了一个从网站上拼凑图标的时代。大概是15~16年，我才开始移除阿里Iconfont logo库。起初，我只下载图标来使用它们，如下
这种直接就是下载的图片，还是比较lol的。后来随着前端技术的学习，直到写uniapp的时候，我开始学习使用图标文件应用。
如果这个图标经常更换，需要经常从新图标文件下载，从新图标文件导入，比较麻烦。然后这一章会通过在线介绍阿里Iconfont图标库来动态加载。这样，你不需要下载图标或图标文件。个人认为最方便的是可以动态更新图标库！而且即使我们删除了阿里Iconfont图标库中的项目组，只要生成了连接的，还是可以在项目中使用的，只是不知道连接恢复时间有多长！
开干Iconfont
官网
图标字体
挑选图标
添加至项目
获取链接
至此，Iconfont平台的运营已经完成，接下来就是VUE的便捷运营了。
在线调用测试
index.html引入连接
link rel= style sheet href=//at . alicdn . com/t/font _ 2872687 _ x 5 kgx 7 w5 eth . CSS rel= external no follow
界面使用
I class= icon font icon-3 column /I
效果观察
测试完成！
VUE项目整合
编写添加head工具
/**
*动态插入css
*/
导出常量loadStyle=url={
const link=document . createelement( link )
link.type=text/css
link.rel=stylesheet
link.href=url
const head=document . getelementsbytagname( head )[0]
head.appendChild(链接)
}
这是为了帮助我们给head添加链接标签，效果如下
main配置
导入链接工具
从“”导入{ loadStyle }。/utils/util
初始化图标字体连接
let iconfontVersion=[ 2872417 _ 3u 9w 2 bdk 2 b ]；
const iconfontUrl=`//at . alicdn . com/t/font _ $ key . CSS `的
这里使用$key的原因是，如果我们有多个图标项，我们可以在iconfontVersion数组中添加多个图标。
编写$key连接方法，调用add link工具方法。
//动态加载阿里云字体库
iconfontVersion.forEach(ele={
console . log(iconfonturl . replace( $ key ，ele))
load style(iconfonturl . replace(key)，ele))
})
完全码
图标使用
I class= icon font icon-3 column /I
I class= icon font icon-column-4 /I
效果展示
这里，我们需要在I标签中写入iconfont，这样我们就可以优化它。
优化iconfont
理论上我们用iconfont icon，那么icon-3column和icon-column-4前面加icon-，那么我们就可以用css匹配来做css叠加了！
使用以下代码编写common.scss文件
//关于图标CSS的设置
[class^=icon-]
font-family: iconfont ！重要；
/*以下内容参考第三方logo库本身的规则*/
字体大小：18px！重要；
字体样式：正常；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
}。avue-input-icon__item i .avue-crud__icon - small {
font-family: iconfont ！重要；
/* 以下内容参照第三方图标库本身的规则*/
字体大小：24px！重要；
字体样式：正常；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
}。埃尔-菜单项[class^=icon-]
右边距：5px
宽度：24px
文本对齐：居中；
字体大小：18px
垂直对齐：居中；
}。埃尔-子菜单[class^=icon-]
垂直对齐：居中；
右边距：5px
宽度：24px
文本对齐：居中；
字体大小：18px
}
全局引用
主要的文件中写入
"导入"。/styles/common.scss
效果查看
搞定
到此这篇关于VUE在线调用阿里图标字体图标库的文章就介绍到这了，更多相关VUE调用阿里图标字体图标库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。