iconfont字体图标的使用方法--超简单!

这里讲解的默认是元素使用类名;

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

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

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

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

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

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

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

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

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

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

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

具体代码如下:

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

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

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

原文：https://www.cnblogs.com/hjvsdr/p/6639649.html

阿里巴巴iconfont字体图标使用方法相关推荐

在HTML种引用阿里巴巴iconfont字体图标
概述什么是阿里巴巴iconfont字体图标呢? iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制. 以前要引用各种图标需要使用的是图标图 ...
微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
手把手教你引入iconfont字体图标（方法二）
二 font class 打开iconfont网站:iconfont-阿里巴巴矢量图标库挑选想要的图标,加入购物车: 全部挑选完后,点击购物车: 将购物车中的图标加入到项目中: 将其添加至项目后,点 ...
将阿里巴巴Iconfont字体图标引入到HTML(CSS)文件中
一.打开iconfont阿里巴巴矢量图标库官方网站.找到喜欢的图标添加入库,同时建立项目,将你所选择的图标放到项目里. 二.复制 "//at..."那一串地址,将其写入在你想引用某 ...
vue项目中使用阿里巴巴iconfont字体图标
1.把下载下的东西解压全放在vue的某个文件夹 2.在main.js引入 import './assets/iconfont/iconfont.css' 3.在需要用图标的标签比如span标签引入你想 ...
iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法一.打开阿里巴巴矢量图官网阿里巴巴矢量图官网界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
阿里巴巴引入字体图标的第二种方法：
阿里巴巴引入字体图标的第二种方法: 第一步:拷贝项目下面生成的fontclass代码: 首先将所选购的图标添加至项目(没有项目可新建项目),如图: 要点击查看在线链接才能生成代码点击复制代码在新建标 ...
mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法,vue使用Muse-UI引入阿里巴巴字体图标的方法
Muse-UI引入阿里巴巴字体图标的方法,以及mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法好紧张第一次写博客,第一次总是痛并快乐着.?有写的不对的,不欢迎广大网友指正? ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...

阿里巴巴iconfont字体图标使用方法

iconfont字体图标的使用方法--超简单!

阿里巴巴iconfont字体图标使用方法相关推荐

最新文章

热门文章