iconfont使用详细步骤

1、使用说明：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

2、查找具体想要的icon图标

3、查找到需要的图标后，点击下载按钮，进入下载页面

如果单张下载的话，可以直接点击最下方那排，选择自己想要下载的格式。

如果想要将这个图标库所有图标都下载下来，可以点击右侧的图标库。

4、下载多个图标

将想要下载的图片加入购物车，然后点击购物车，可以一起下载素材

5、下载到本地

先下载这个库的所有图标

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=11553

先全部加入购物车

然后打开购物车，下载素材，会显示一次最多只能下载20个图标哦

或者选择添加至项目添加到项目后，可以点击下载到本地

6、修改下来的文件

下载下来的是一个压缩包，解压之后，里面还嵌套了一个文件夹。

在本地项目中新建一个文件夹，然后将之前那个下载下来的本地图标里面的五个文件复制到该新建的文件夹内，iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff

iconfont.css内需要修改一下引用的url链接地址，修改的五个地方如下图所示

7、应用

在我的项目中引入这个css文件，然后使用标签，classname应该加上前置iconfont，然后再加上你想要引用的表情的class名称。class名称可以通过查看刚刚下载下来的图标的名称。

import './App.css';
import React, { Component } from 'react'
import './iconfont/iconfont.css';
class App extends Component {render() {return (<div className="App"><div className="iconfont icon-bukaishi"></div><i className="iconfont icon-cry"></i></div>);}
}export default App;

8、问题

第一次的时候，图标显示图上的样子。问题是，该图库不允许使用。资源库有问题。然后我换了另外一个资源库就OK了

iconfont使用详细步骤相关推荐

uniapp小程序中使用base64格式的字体图标iconfont的详细步骤
下图是uniapp官网中对uniapp中字体图标使用规范的描述这是官网地址中的原文链接 uniapp官网原文从官网中对uniapp中字体图标使用规范的描述里可以看出,uniapp中使用字体图标的方 ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
用VUE实现一个具有登陆、注册等功能的网站【详细步骤】
用VUE实现一个具有登陆.注册等功能的网站[详细步骤] 用VUE实现一个具有登陆.注册等功能的网站[详细步骤] 一.主要功能二.实现思路 1.页面设计 2.功能设计 3.重点和难点三.代码实现 1 ...
优购商城项目详细步骤流程
优购商城项目详细步骤流程一.准备的工作 1.文档写项目之前必须要有接口文档准备工作接口文档是必不可少的参考文档我们还可以参考小程序的开发文档.阿里巴巴字体 iconfont .mdn- 2 ...
360浏览器如何保存html文件夹下,在360浏览器中将书签保存的详细步骤
软件大小: 68.6MB 软件版本: 12.2.1812.0 软件类型: 浏览器查看详情直接下载很多用户都选择使用360浏览器,那么你们知道在其中怎样保存书签吗?下文就是在360浏览器中将书签保 ...
Cacti安装详细步骤
Cacti安装详细步骤前提LNMP或LAMP架构已搭建完成一.cacti概述 1. cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据 ...
android系统的iphone,iPhone上安装Android系统详细步骤。
该楼层疑似违规已被系统折叠隐藏此楼查看此楼在iphone安装android系统的详细步骤首先,准备好iphone的多点触屏和wlan固件.因为法律的缘故,我们不能分享这些文件,你可以去ipsw文 ...
Windows Server 2003 AD升级到Windows Server 2008 AD的方法及详细步骤
前言: Windows Server 2008 是现在企业比较流行的服务器操作系统,安全性高,配置灵活.方便,集成了Hyper-V虚拟化功能,能够充分发挥硬件的性能.Windows Server 20 ...
HTML用乘法函数,Excel乘法函数的使用方法和详细步骤
Excel是一款非常强大的办公软件,其应用非常广泛.我们在日常工作中经常都要用到Excel,使用Excel进行处理大型数据的表格,要在数据上计算就会使用到数据上相乘,这时候我们就需要使用乘法的函数,那 ...

iconfont使用详细步骤

iconfont使用详细步骤相关推荐

最新文章

热门文章