uni-app引入阿里巴巴矢量库（iconfont）图标

标题uni-app引入阿里巴巴矢量库（iconfont）图标

进入官网，下载到本地

需要使用的的文件
在uni项目中根目录下的static下创建文件夹iconfont
将这里这个iconfont.css改名为 index.css 放在刚创建的iconfont文件夹下
然后在iconfont文件夹下创建font文件夹里面放其他三个文件
打开index.css改一下他引入这几个文件的路径因为uni中是不能用当前目录的必须从项目的根目录开始写路径才能找到这些文件

然后在App.vue根组件中的style标签中写入代码引入index.css

@import url("static/iconfont/index.css");

1.这里的路径也要相对于项目的根目录开始找
2.然后App.vue引入了那其他组件自然也就都可以使用图标了
3.iconfont这个属性必须带着

index.css

uni-app引入阿里巴巴矢量库（iconfont）图标相关推荐

ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...

uni-app引入阿里巴巴矢量库（iconfont）图标

标题uni-app引入阿里巴巴矢量库（iconfont）图标

uni-app引入阿里巴巴矢量库（iconfont）图标相关推荐

最新文章

热门文章