iconfont引入方法

step 1:找到阿里巴巴矢量图标库官网https://www.iconfont.cn,然后注册登录,或者用github登录也行,此步骤跳过;

step 2:找到图标管理->我的项目->然后新建项目:

右边点击新建项目,用于保存自己常用的图标;

step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

我现在将第一个安卓图标加入我的项目,点击加入购物车

step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

自动跳转到对应的项目里了,如图:

step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

下载下来解压后的文件如下:

强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

具体代码如下:

好了,刷新页面,图标是不是出来了呢?

Ok,到这一步,恭喜你成功了,是不是很简单,不简单?那就从头再看一遍;

调节字体图标的大小是通过元素的font-size属性来控制的;

iconfont引入方法相关推荐

iconfont图标引入方法
iconfont图标引入方法图标库链接阿里巴巴矢量图标库链接: [https://www.iconfont.cn/](https://www.iconfont.cn/). 使用方式引入方式添加 ...
【CSS】阿里iconfont的使用方法（另附font-family引入方法）
最近学习CSS中研究了一下阿里妈妈出品的阿里iconfont图标的引入方法.网页的各种常用图标引入不愁啦~ 主要分为线上引用和本地引用(更稳定). 一.线上引用不足:线上引用比较依赖阿里iconfo ...
如何在代码里添加并使用阿里巴巴矢量图标-iconfont，在此常用有三种引入方法
iconfont-阿里巴巴矢量图库在登录好账号的前提下进行以下操作: 添加icon: 首先搜索你想要的icon名,比如:首页选好你想要的图--加入购物车--添加至项目(没有项目的话可以新建项目,如 ...
阿里iconfont使用方法
阿里巴巴iconfont的使用方式分为两种: 本地使用线上引用 iconfont-阿里巴巴矢量图标库 0.前期准备使用时先到网站上选中需要使用的图标添加至项目 1.本地使用 1.下载项目至本地 2 ...
wordpress引入php文件,WordPress主题制作之模板文件的引入方法，wordpress模板
WordPress主题制作之模板文件的引入方法,wordpress模板 get_template_part() 用来引用模板文件,类似于 get_header().get_sidebar() 和 ge ...
安卓开发使用ttf文字_Android中正确使用字体图标(iconfont)的方法
字体图标字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适 ...
CSS 样式表引入方法
CSS样式表有4种引入方法,分别为行内式.内嵌式.外链式.导入式,具体介绍如下: 1.行内式行内式也被称为内联样式,语法格式如下: <标签名 style="属性1:属性值1:属性2: ...
Iconfont使用方法的详细教程，html怎样引入iconfont
1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车(这一步很简单,就像逛淘宝一样!): 2.然后就是点击一下购物车,它会出现'下载代码'的按钮,点击下载保存到本地: ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

iconfont引入方法

iconfont引入方法相关推荐

最新文章

热门文章