antd 项目中使用iconfont图标

最新推荐文章于 2024-12-16 14:30:26 发布
原创 最新推荐文章于 2024-12-16 14:30:26 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#reactjs #html5

本文介绍如何在antd design项目中使用阿里图标库的图标。首先，通过阿里图标库搜索所需图标并下载代码，然后将解压后的文件复制到项目中，特别是修改iconfont.css的前缀路径。接着，在全局less文件中引入iconfont.css。如果图标未显示，可能需要将iconfont的样式添加到引用的less文件中。

想在antd design项目中使用阿里图标图标

使用方式和在普通项目中的使用方法一样,

如果你只是自己在阿里图标库中自己找个图标使用 首先进入阿里图标首页, 搜索你想要的icon

在这里插入图片描述

在这里插入图片描述
点击右上角 购物出, 下载代码
在这里插入图片描述

如果你有自己的项目
在这里插入图片描述

下载代码到本地以后 解压

在这里插入图片描述

把当前这六个文件复制到项目中

在这里插入图片描述
记得修改iconfont.css文件的前缀路径
然后在全局的less文件中引用iconfont.css文件

如果还不出来 就查看有没有样式等, 可能还需要把.iconfont.css中的 iconfont的样式复制要你引用的less文件中

然后使用<span class="iconfont">&#x33;</span>
在这里插入图片描述

最低0.47元/天 解锁文章
在antd项目中以Symbol方式引用IconFont图标
大唐锦绣的博客
07-15 2490
前言：IconFont官方有三种引入方式供你选择：SVG Symbol、Unicode 及 Font class。我们推荐在现代浏览器下使用 SVG Symbol 方式引入。SVG 符号引入是现代浏览器未来主流的图标引入方式。其方法是预先加载符号，在合适的地方引入并渲染为矢量图形。有如下特点： 支持多色图标，不再受到单色图标的限制 通过一些技巧，支持像字体那样，通过 font-size、color 来调整样式 支持IE 9+ 及现代浏览器 一、生成图标库代码 首先，搜索.
修改iconfont图标颜色
qq_41742961的博客
11-02 2516
<svg t="1635862467503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3698" width="200" height="200"><path d="M812.35 724.75H365.5c-50 0-90.58-42.25-90.58-94.37V366.16c0-52.12 40.55-94.36 90.58-94.36h44
在antd项目中使用iconfont、自定义图标
weixin_33819479的博客
11-15 4166
- ## 在antd项目中使用iconfont 使用antd Icon（https://ant.design/components/icon-cn/#components-icon-demo-custom）的自定义图标写法 官方效果：https://codesandbox.io/s/jjmk7w7nqv 复制下载下来的iconfont的svg标签内容至自定义组件 去掉svg标签的style、...
Antd 导航菜单使用iconfont
weixin_40228604的博客
01-07 2468
在很多项目开发过程中，Iconfont的使用一般不是使用原始库，在不使用原始库过程中我们就需要另辟蹊径，我这里举例的是iconfont库 废话不多说直接上代码和截图 antd给过的导航菜单默认使用了 Icon 图标库 import { Menu, Button } from 'antd'; import { AppstoreOutlined, MenuUnfoldOutlined, MenuFoldOutlined, PieChartOutlined, DesktopOu
antd design react 使用 IconFont 图标库
noeal的博客
06-21 2102
antd design react 使用 IconFont 图标库
react + antd 引入iconfont 图标
m0_59148573的博客
03-29 967
打开iconfont.js文件，在第一行添加。
Antd引入iconfont图标库
最新发布
tjl511512的博客
12-16 898
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成});
react+webpack+antd框架自定义使用阿里iconfont图标。
05-19
要在React+Webpack+Antd框架中使用阿里Iconfont图标，需要进行以下步骤： 1. 在阿里Iconfont官网上选择需要的图标，并将它们添加到购物车中。 2. 在购物车中选择需要的图标，并下载iconfont文件。 3. 将下载的...
阿里巴巴矢量图标（iconfont）添加后显示不出来的解决办法
热门推荐
weixin_42617604的博客
10-07 3万+
问题: 添加阿里巴巴矢量图标（iconfont）后页面内能看到但是显示不出来： 解决办法: 后面发现地址栏是file://文件打开： 这样是不行的，要使用 iconfont 要在本地的服务器打开才能看到 用git bush进入index.html的文件夹，然后输入 http-server 打开服务器： 再地址栏输入：127.0.0.1:8080 就能看到了 ...
Vue 使用 阿里巴巴 iconfont 没有显示问题
liulang1905的博客
05-19 2011
记录一次小坑，就是可能路径不对，需要放到public下 和 index.html同级就好了 <!-- 你的具体路径 这段在你的index.xml中引入，这里引入可以全局使用，如果单独页面也可以单独引入--> <link rel="stylesheet" href="/icons/iconfont.css"> <!-- 下载后的图标的class --> <span class="iconfont icon-zhankai"></span> 如
dva 中使用自定义 Iconfont 遇到的坑
weixin_33695450的博客
10-23 420
2019独角兽企业重金招聘Python工程师标准>>> ...
解决react antd design pro 二级图标不显示问题（v4版本）
weixin_44205155的博客
03-04 4676
解决react antd design pro 二级图标不显示问题（v4版本） 1、问题描述 在项目路由配置中，对各个子路由配置icon属性，但是项目实际运行中并不能显示 { path: '/system', name: 'system', icon: 'icon-xitong', routes: [ { path: '/system/user', name: 'user',
antd 拓展 iconfont
Arthur__Wong的博客
07-19 1181
1.首先iconfont新增项目增加图标，此处较为简单，不作详细说明。 注意！！！ 前缀写anticon，而font family需要写anticon-user， 试着加入几个图标， 2.点击下载至本地，需要到如下几个重要文件， 抽取这几个重要文件添加到antd项目的静态文件夹public目录下， 这里添加问价后会报错，iconfont.css文件中对字体文件路径发生...
react ant Design pro Umi 项目左上角icon不显示
Z_kenshou的博客
03-17 1233
另外在说一种情况：本地的logo也能正常加载不过config里面设置了publicPath 或者是 base，logo就不能正常展示了。那就请把logo的路径也加上这个前缀路径logo也会正常加载。然后找了找资料说 LayoutSettings 哪里logo用链接图片可以本地图片有时候会加载异常。今天本地运行项目没有问题，打包发到远端发现logo icon不显示了。
在antd项目中使用iconfont图标
chenxiaoyi0207的博客
01-14 1万+
经常会使用iconfont的图标，因此记录方法。 一、官网介绍 二、使用方法 1.进入iconfont.cn-&amp;gt;图标管理，点击下图按钮，新建项目 2.填写项目基本信息 3.创建完成，点击上传图标至项目 将从iconfont图标库中下载的svg文件拖入上传区域中 提交 4.生成代码 这样就生成了react项目Icon.createFromIconfontCN中的参数scriptU...
antdpro菜单自定义图标
qq_30047905的博客
09-14 2145
创建图标 Ant Design自带了一些图标（https://ant.design/components/icon-cn/），但是符合项目中的图标很少，需要自己去设计或者去网上下载字体图标，这里推荐去https://www.iconfont.cn下载或上传自己想要的图片， 使用图标 1.在线字体使用 复制 //at.alicdn.com/t/font_2808839_p5hy7qk0gkj.js 修改项目defaultSettings.ts 文件中的ico...
AntD Button 图标集成 iconfont
IT界中的一枝梅的博客
09-23 4222
1、概述 近期，前端项目在做优化，优化点：Button组件图标加载。 问题描述：图片资源来自服务端返回的结果，虽然目前实现异步加载，但避免不了多次请求服务端就会造成性能问题，所以，就考虑到前端本地化资源存储，一种是存储成xml文件，一种是svg格式文件。 要求：现请研究图片集成方式，避免多次请求（注：美工的切图都是彩色图，颜色大于2种） 解决方案：按钮集成iconfont库 2、步骤 1.首页登录 https://www.iconfont.cn/home/index 注册（GitHub账号第三方登录） 2
antd引入阿里巴巴矢量图库的icon图标
qq_33071241的博客
08-26 6438
antd的icon库满足不了用户的需求，因而很多人会去阿里矢量图库搜索自己理想的图标，在选择好自己想要的图标后，按以下步骤可将其完美的引入我们的antd的项目中了 第一步：将图标均添加至各位自己创建的我的项目中去，这样方便之后的操作 第二步：规范命名你所选择的图标，并且加上项目的名称作为前缀，防止与antd自带的icon的命名有冲突。之后一定记得要编辑项目的打包的字体设置和font的前缀！...
react/antd-pro本地引入iconfont
weixin_43735321的博客
09-26 951
react/antd-pro本地引入iconfont****最终方案:**** 在网上找了很多例子,但是都不好用. 1.第一种实现方式需要引入 antd的Icon组件,但是antd4.0版本已经弃用了 const IconFont = Icon.createFromIconfontCN({ scriptUrl: iconFont }) 2.第二种实现方式需要在 defaultSettings.ts 的iconfontUrl 中填入链接,但是我的没有实现,所以放弃了 const proSettings: De
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值