iconfont使用详细步骤

iconfont使用详细步骤1 使用说明 https www iconfont cn help detail spm a313x d8d11a391 amp helptype code2 查找具体想要的 icon 图标 3 查找到需要的图标后 点击下载按钮 进入下载页面如果单张下载的话 可以直接点击最下方那排 选择自己想要下载的格式 如果想要将这个图标库所有图标都下载下来 可以点击右侧的图标库 4 下载多个图标将想要下载的图片加入购物车 然后点击购物车 可以一起

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

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

iconfont使用详细步骤

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

iconfont使用详细步骤 

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

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

4、下载多个图标

iconfont使用详细步骤

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

5、下载到本地

先下载这个库的所有图标

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

先全部加入购物车

iconfont使用详细步骤

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

iconfont使用详细步骤或者选择添加至项目iconfont使用详细步骤添加到项目后,可以点击下载到本地

6、修改下来的文件

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

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

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

iconfont使用详细步骤

 7、应用

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

import './App.css'; import React, { Component } from 'react' import './iconfont/iconfont.css'; class App extends Component {   render() {     return (        
  
             
   
              
    
                 );   } } export default App; 
     
    
  

8、 问题

iconfont使用详细步骤

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/227603.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午8:56
下一篇 2026年3月16日 下午8:56


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号