vue引用阿里云iconfont使用icon图标（elementUI图标太少）

方法一（推荐）

1. 进入Iconfont(https://www.iconfont.cn/)
2. 找到自己的项目->更多操作->编辑项目

3. 修改前缀，之后用的时候就可以icon-al-xxxxx(可以修改自己习惯和喜欢的样式)

4. 点击Font class，点击查看在线链接，复制下面代码

5. 进入vue根目录的Public/index.html，打开文件，将下列代码添加进去

<link rel="stylesheet" type="text/css" href="刚才复制的代码">

6. 之后就可以复制代码，然后像使用elementUI里面一样使用啦。（例如：icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”），如果没有显示，重启一下项目 npm run serve 。

方法二

1. 进入Iconfont(https://www.iconfont.cn/)
2. 找到自己的项目->更多操作->编辑项目

3. 修改前缀，之后用的时候就可以icon-al-xxxxx(可以修改自己习惯和喜欢的样式)

4. 将icon文件下载到本地

5. 将下载下来的文件解压后，找到目录下的iconfont.css文件，然后做如下修改

6. 将下列iconfoot文件拷贝到项目里面就可以了

8. 在vue的Main.js 里面引入iconfont，在elementUI的css之前引入，我放到之后引入，elementUI的icon就不显示了

9. 之后就可以复制代码，然后像使用elementUI里面一样使用啦。（例如：icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”），如果没有显示，重启一下项目 npm run serve 。

参考：https://www.jianshu.com/p/a6b54662753b

vue引用阿里云iconfont使用icon图标（elementUI图标太少）相关推荐

网站引用阿里云oss里面的远程字体图标不显示解决方案
1.打开浏览器f12,console里面提示的是跨域请求错误. 2.登录阿里云控制台,找到oss控制面板,如下图找到跨域设置. 3.创建跨域规则.允许所有来源的所有请求的所有headers.
uin-app 使用阿里云iconfont图标
uin-app 使用阿里云iconfont图标介绍开始 1. 去阿里云图标选择自己,需要的图标,然后加入购物车. 2. 进入购物车,下载源码 3. 下载好以后,解压,把压缩包里面的文件放在相应的位 ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
vue使用阿里云矢量图
vue使用阿里云矢量图在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
vue使用阿里云视频点播
vue使用阿里云视频点播--videoId + playauth的方式一. 上传视频官方文档https://help.aliyun.com/document_detail/52204.htm?sp ...
vue调用阿里云无痕验证
vue调用阿里云无痕验证在调用阿里云无痕验证时有个先决条件需要全局变量先定义才能去加载js set_ALY_config () {var _this = thisreturn new Promise ...
在vue框架下element-ui两种引用阿里云图标库的方法
方法一下载资源到本地 1.搜索想要的图标并添加入库 2.添加入项目 3. 下载解压放入src的文件中, 要在main.js文件中声明引入压缩包中的iconfont.css文件注意文件路径 4.引入 ...
html 页面如何引用阿里云图标？
1.进入阿里云图标库(iconfont-阿里巴巴矢量图标库) 2.搜索自己想要的阿里云图标(如:telphone) 3.找到自己想要的图标,加入购物车 4.可以加入项目或直接下载代码 5.下载好后,找 ...
html、小程序引用阿里云图标方法
html引用样式 //阿里云图标项目里生成的链接 @font-face {font-family: 'iconfont'; /* project id 1603983 */src: url('//a ...

vue引用阿里云iconfont使用icon图标（elementUI图标太少）

方法一（推荐）

方法二

vue引用阿里云iconfont使用icon图标（elementUI图标太少）相关推荐

最新文章

热门文章