代码拉取完成,页面将自动刷新
同步操作将从 陌溪/LearningNotes 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
最近想给前端的一些小图标都更换成矢量图,经过调查后,发现目前存在的矢量图网站有下面几个:
这两者也是有些区别的:
首先FontAwesome是可以商用并且免费,而阿里的商用具有潜在风险,因为一些图标具备版权和原创的,作者不允许商用到其它网站,当然如果没有用在商业用途上的话,是可以正常使用的
首先进入阿里巴巴矢量图标库的官网:点我传送
首先进入的是一个搜索页面,我们输入我们需要下载的内容,然后搜索:
然后在选中对应的图标,加入购物车,挑选完成后,我们点击购物车,然后点击添加至项目
这个时候,下面会出现有一个弹框,如果没有对应的项目的话,我们需要自己创建一个
然后点击下载到本地
下载完成后,我们解压文件夹,得到以下的内容
我们打开demo_index.html文件
能看到每个图标对应的Unicode码,我们就安装第一种方式引入到Vue项目中
首先将刚刚文件夹内,除了demo_index.html的文件都复制到vue项目的assest中,创建一个文件夹叫iconfont
然后我们需要在main.js中引入样式文件
import "@/assets/iconfont/iconfont.css";
然后就可以使用了,注意标签中的内容,就是个刚刚demo_index.html中的Unicode编码,我们引入对应的编码即可得到对应的图标
<span class="iconfont"></span>
<span class="iconfont"></span>
下面看看最终的效果图
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。