iconfont在ionic中的使用（阿里图标库）

iconfont在ionic中的使用：

1.进入iconfont官方网址后

2.搜索你想要的图标，添加到购物车（前提：是已经登录，这里可以使用github注册登录）

3.点击购物车创建项目并下载到本地

4.下载之后的文件

5，在index.html引入

<!-- 引入iconfont的css --><link rel="stylesheet" href="assets/font/iconfont.css">

6.在页面这样显示<i class="iconfont icon-music"></i>(icon-music是图标的名称)

在iconfont.css里面查看（也可以在这个文件里设置想要的颜色，设置大小）

 <ion-grid><!-- wrap：用来换行 --><ion-row wrap><ion-col text-center tappable col-3 *ngFor="let music of musicCate" ><i class="iconfont  {{music.icon}}"></i><br><span class="title">{{music.name}}</span></ion-col></ion-row></ion-grid>

这里是我项目中取出图片的方式，

页面展示：

iconfont在ionic中的使用（阿里图标库）相关推荐

微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...
HTML中如何使用阿里图标库？
为什么使用阿里图标 1.兼容性最好,支持ie6+,及所有现代浏览器. 2.支持按字体的方式去动态调整图标大小,颜色等等. 3.缺点:因为是字体,所以不支持多色.只能使用平台里单色的图标,就算项目里有多 ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
阿里图标库iconfont如何使用
1.在阿里图标库(http://iconfont.cn/)选择自己喜欢的一个或多个图标,效果如下图所示 2.网页右上角的小购物车, 3.这里我们选择下载代码.下载好了后在项目需要的地方解压. 4.这是 ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...
Vue如何使用iconfont（阿里图标库）
1.在iconfont上任意方式登录 2.选择图标管理下,我的项目 3.新建一个项目(如果已有项目可忽略) 4.创建好之后就可以找自己要用的图标,添加到自己的项目里 5.图标添加完毕后,再次回到我的项 ...

iconfont在ionic中的使用（阿里图标库）

iconfont在ionic中的使用（阿里图标库）相关推荐

最新文章

热门文章