引入阿里icon库的方法（font-class 引用）

iconfont-阿里巴巴矢量图标库

选择自己想要的图标，添加到购物车，选择【添加至项目】

使用【在线链接】生成【Font Class】，也就是通过类样式来使用这些图标

得到这些图标的class样式数据：

粘贴样式数据到项目中去：【注意要改成wxss！！！】

因为这些图标都是存在外网上的，所以并没有存在本地，所以不会站多大空间~

现在，想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件

页面中使用图标的方法：

<text class="iconfont icon-Pdf" style="font-size: 80px;"></text>

iconfont icon-Pdf 这两个很重要！

所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了

然后，有个很严重的问题：图标没有颜色

unicode 和 font-class 的图标引用

因为是字体，所以不支持多色。只能使用平台里单色的图标

引入阿里icon库的方法（font-class 引用）相关推荐

vue项目中使用阿里icon库
从阿里字体图标库新建一个项目(当然也可选择其他icon库) 注意:Font class前缀不要和elment-ui中的图标前缀一样 2.选择需要的图标添加至项目,并生成Font class,下载至本地 ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
vue页面和nvue页面、引用阿里图标库-图标方法
iconfont-阿里巴巴矢量图标库选择所有要使用的图标加入购物车如下图下载下载后下面的3个图标可以任意使用后期如果增加了图标需要重复以下步骤并且把 .ttf 这个文件替换掉项目 ...
ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...
css使用font-face引入阿里图标库的图标 - Kaiqisan
大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩,今天讲讲font-face的使用方法,它其实在项目中相当常见. 首先打开阿里云官网搜索随意一个图标(我这里的搜索关键词是收藏) 把图 ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
引入阿里图标库（iconfont）后图标黑白问题
Font Class引入方式不支持彩色图标. 想要运用彩色图标得通过Symbol方式引入,得以SVG的方式展示. <svg class="icon" aria-hidden= ...
小程序引入阿里icon
第一步:打开https://www.iconfont.cn/home/index选择icon 第二步:添加至购物车,然后下载至项目第三步:将下载的文件里iconfont.css重命名为iconfon ...
Visual Studio 2013中引入Web Service的简单方法visual studio 引用 wsdl
http://blog.csdn.net/wangzhongbo_24/article/details/49954191 Web Service有三种表示方式三种方式分别为WSDL.Endpoint ...

引入阿里icon库的方法（font-class 引用）

引入阿里icon库的方法（font-class 引用）相关推荐

最新文章

热门文章