react-iconfont-在线-使用
2021-08-24 本文已影响0人
云高风轻
1. 前言
1.官网iconfont
2.现在的项目iconfont的用的非常普遍,今天梳理下react项目中的用法
2. 准备需要图标
1.iconfont 登录
2.选择自己的图标
3.加入购物车
4.添加到项目
以上步骤是常规的步骤,不按上边也无所谓的
5.查看项目
1.png
6.效果图1.png
3. 本地使用iconfont
1.点击下载至本地
2.下载的内容1.png
3.运行 这个demo_index.html文件
4.运行效果1.png
- 按照这个 三个步骤去使用就行 ,非常简单
小技巧
0.准备1.png
1.更改前缀
2.选择字体格式
1.png
4. iconfont--Unicode--在线版本
- 点击查看在线链接.
1.png
接下来根据的你的项目情况 会出现不同的界面
3.点击更新代码
1.png
- 或者是点击生成
1.png
4.复制代码
不管上面的第三步是哪种情况,生成代码后操作都一样
`.png
5. react使用-inconfont-Unicode在线链接
这个根据自己的情况把复制的代码粘贴到css里面就行
这里我以react为例
1.你可以放到单独的全局样式中
2.也可以放到index.css 或者App.css中
5.1 在线链接使用
这里以写到 App.css中为例
/* iconfont 使用 Unicode 生成在线链接 */
@font-face {
font-family: 'iconfont'; /* Project id 1440303 */
src: url('//at.alicdn.com/t/font_1440303_tx50qaqbpfr.woff2?t=1629792672700') format('woff2'),
url('//at.alicdn.com/t/font_1440303_tx50qaqbpfr.woff?t=1629792672700') format('woff'),
url('//at.alicdn.com/t/font_1440303_tx50qaqbpfr.ttf?t=1629792672700') format('truetype');
}
5.2 图标样式
1.预览字体2.png
2.预览效果1.png
- 复制 iconfont
/* 可以自己改成自己想要的 比如yzsIconfont*/
.iconfont {
font-family: "iconfont" !important;
/* 样式都可以 修改 font-size: .20rem; */
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
5.3 具体使用
1.复制想要的图标
2.鼠标放到自己需要使用的图标1.png
3.点击复制就得到了需要图标的Unicode编码
4.一般用i或者span标签
5.class名字和之前自己写的样式保持一致(这里react使用className)
6.标签之间粘贴刚才复制的Unicode编码
<span className="iconfont "></span>
- 效果就不截图了
6. iconfont--Font class--在线版本
1.生成在线链接的步骤和上面的
Unicode在线版本一样
2.复制代码1.png
7.react使用-iconfont--Font class--在线版本
1.把上述复制的代码粘贴到样式文件
这里以react的App.css为例
7.1 iconfont--Font class--在线链接使用
/* iconfont 使用 Font class 生成在线链接 */
@import "https://at.alicdn.com/t/font_1440303_tx50qaqbpfr.css";
7.2 复制需要的 图标 编码
步骤和之前的
Unicode一样
7.3 具体使用
<span className="iconfont icon-shangjia"></span>
