iconfont阿里图标使用方法（Font Class用法）

1、先去iconfont官网下载图标选图标加入购物车

2、从购物车里下载代码（或者png、svg看需求）

3、下载解压后会有一个这样的文件夹

把这三个文件重新创建一个文件夹放到项目的文件夹里（主要是ttf字体文件有些下载后的文件夹里只有ttf文件从iconfont下载的图标属于字体图标）

4、然后再把iconfont.css文件直接复制到项目里的css文件夹里（其实和demo.css文件是一样的）

5、最后文件加到项目文件夹里应该是这样

6、打开iconfont.css文件（最关键的一步）

修改font-face里的文件配置：

font-family可以修改class名（取决于你之后调用图标时class名里前面的名称）

URL里只把问号 ‘?’ 之前的内容修改为iconfont里文件的路径后面是文件类型

7、在你要使用图标的页面里（JSP页面或者HTML页面）

link引用iconfont.css文件 href里的路径根据自己的文件夹去改

8、最后用 i 标签直接调用图标即可

加style可以修改颜色

class里前面的名称就是之前在iconfont.css文件里配置的font-family里的名称

class里后面的名称

打开之前下载的文件夹里HTML文件找到对应的图标图标下面点‘.’ 后面就是名称

iconfont阿里图标使用方法（Font Class用法）相关推荐

iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
1.登录阿里图标官网 2.注册自己的账户,创建项目 3.加入自己使用的图标,加入购物车 4.选中项目 5.选中引入方式: 第一种.使用统一码 Unicode 第二种.使用class Font clas ...
vue前端项目引入iconfont阿里图标（font class）
1.首先进入阿里图标库官网(iconfont-阿里巴巴矢量图标库),选取你所要的图标,将其添加购物车. 2.然后进入购物车,点击添加进项目 3.点击下载到本地 4.将下载的文件复制下来 5.在main ...
阿里图标库使用font class 写法和unicode引用，简单，使用快捷
主要介绍 font class和unicode 写法,个人比较偏好这两种写法,使用简单直接开始吧使用步骤 1.打开阿里图标库的官网:https://www.iconfont.cn/ 2.必须要先登 ...
vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
阿里巴巴iconfont字体图标使用方法
iconfont字体图标的使用方法--超简单! 这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; ...
东北狼仙-织梦仿站获取网站的iconfont字体图标字体方法
好久没有仿站了突然碰到这个问题,随心所欲的就发布了一下获取网站iconfont字体图标方法首先找到CSS文件下载打开搜索@font-face 查找类似代码 @font-face { font-fa ...
iconfont—阿里图标的使用
阿里图标库为我们提供了许多丰富精美的图标, 可以通过代码引入的方式将图标库引入到我们的项目中,用来美化我们的界面.iconfont 的使用方式有以下几种: 方式一:font-class 在线引入打开 ...
vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...

iconfont阿里图标使用方法（Font Class用法）

iconfont阿里图标使用方法（Font Class用法）相关推荐

最新文章

热门文章