阿里字体图标库的使用
https://www.iconfont.cn/阿里字体图标库网址
选择首页顶部导航栏里面的 资源管理 —》 我的项目
如果还未创建项目,请先创建项目,并添加想要的图标
一.通过symbol引入svg图片(vue项目或者原生框架)
第一步:拷贝项目下面生成的symbol代码:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步:加入通用css代码(引入一次就行):
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>
二.通过symbol引入svg图片(react框架)
第一步
import { createFromIconfontCN } from '@ant-design/icons';
第二步,尽量添上https将地址补全
const IconFont = createFromIconfontCN({scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
第三步,icon的样式可以自己视情况进行修改,type对应的值就是字体图标库里面每个图标下面对应的字符串名字
<IconFont className="icon" type="iconFrame19"></IconFont>
三.通过symbol引入svg图片(react框架+ umi)
在项目根目录下找到umircs.ts配置文件
在export default defineConfig({
})里面添加 scripts: [
‘https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js’,
],同样记得把地址补全
export default defineConfig({runtimePublicPath: false,publicPath: baseURL,history: {type: 'hash',},scripts: ['https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',]...})
在需要使用图标的地方
icon同样可以自己设置,xlinkHref的值为字体图标对应名称
<svg className="icon" aria-hidden="true"><use xlinkHref="#icon-xxx"></use>
</svg>
tips:本人亲测失败,失败的同学用方法二,如果方法三有成功的同学能留言说下吗?嘻嘻
四 使用unicode
点击添加至项目并下载
下载完成后解压,只保留这四个文件,并放入font文件夹
全局引入iconfont.css文件,就可以使用了,
<span class="a"></span>.a:before {content: '\100d9';font-size: 36px;color: red;font-family: 'iconfont';}
<span class="iconfont a"></span>.a:before {content: '\100d9';font-size: 36px;color: red;}
阿里字体图标库的使用相关推荐
- 在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
- uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...
- uni-app引入阿里字体图标库
1.官方地址 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfon ...
- u-view2.0 引入iconfont(阿里字体图标库)详细步骤!
uView已通过大量的实践中,收集了用户最有可能需要用到的图标,见Icon 图标,但我们也相信,它肯定无法覆盖所有的场景和需求. 用户也可以使用标签的方式,自行引入字体图标,为何要通过扩展的方式集成呢 ...
- 项目导入阿里字体图标库
1.先进入阿里图标库 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.搜索想要的图标,加入购物车 3.点击购物车 ...
- vue引入iconfont阿里字体图标库报错和解决
报错:引入阿里字体库后报错说找不到文件 解决:在引入的字体iconfont.css中加入绝对路径 内容:如图 @font-face {font-family: "iconfont" ...
- react native 使用阿里字体图标库
前言 本文基于 "react-native": "^0.70.0" 1.下载iconfont图标文件 将iconfont图标文件放置在src/assets/fo ...
- 在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
- 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标 方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
- CSS——引入阿里字体图标步骤
第一步 下载图标: 在阿里矢量图标库(http://www.iconfont.cn)内搜索需要的图标,选中点击添加入库: 选择完成后,右上角库中点击下载代码: 下载完成后解压文件生成一个文件夹. 将文 ...
最新文章
- Java 线程池的介绍以及工作原理
- 非监督学习的单层网络分析
- 使用handler倒计时
- stm32usb做虚拟串口和键盘_关于stm32f103的USB虚拟串口程序移植
- (转)asp.net2.0 上传大容量文件第三方控件radupload
- 17 SD配置-企业结构-分配-分配允许的信用控制范围给公司码
- ERROR: Minions returned with non-zero exit code
- 常用的计算机显示器按其显像原理可分为什么,计算机组装与维护的试卷C答案...
- SVM(三)—Kernels(核函数)
- 简单说说Java SE、Java EE、Java ME三者之间的区别
- Hinduja Global Solutions借助OpManager一年节省300万美元
- 本特利框架3500/05-01-01-CN-00
- tornado tcpclient 应用实例
- 总结:xshell的一些使用技巧
- sys fs的原理和使用
- 【Python案例】OCR提取图片中的文字
- flash 批量编译发布fla 文件
- 关闭xshell6提示音
- mindmanager 2021许可密钥全新可视工作管理和思维导图软件
- Python 安装模块 使用pip install xxx很慢的解决方法