阿里iconfont的使用

Font class使用方法

一、在线引入字体,或下载文件后引入

参考阿里icon官网

二、使用图标

用法一、

1 设置标签class,第一个是字体,第二个是图标名称,图标即可生效

​​​​​​​用法二、

font-family:'icon'

content:输入图标代码

.el-icon-arrow-down:before {
  font-family: 'iconfont';
  content: '\e612';
  font-size: 20px;
  color: #333;
  font-weight: 700;
}

### 配置和使用阿里 IconFont #### 在 Vue 项目中配置 Ali IconFont 为了在基于 Vue 的项目中使用阿里 IconFont,需按照如下方式操作: 在项目的根目录文件 `app.vue` 中的 `<style>` 标签内引入样式文件。这一步骤确保了整个应用可以访问到这些图标。 ```css /* 引入阿里字体图标库 */ @import url("static/style/iconfont.css"); ``` 此方法使得所有组件都能识别并显示来自阿里 IconFont 的图标[^1]。 #### Flutter 项目集成 IconFont 字体 对于 Flutter 应用程序来说,要使自定义字体生效,则需要编辑 `pubspec.yaml` 文件来声明新的字体资源,并创建 Dart 类用于映射图标的 Unicode 编码至可读名称。 向 `pubspec.yaml` 添加字体描述部分,指定字体路径以及对应的 font-family 名字: ```yaml fonts: - family: Iconfont fonts: - asset: assets/fonts/iconfont.ttf ``` 接着,在 `lib/common/utils/` 下新建名为 `iconfont.dart` 的文件,编写静态常量类存储各个图标的编码值及其属性设置: ```dart class Iconfont { static const IconData share = IconData( 0xe60d, fontFamily: 'Iconfont', matchTextDirection: true, ); } ``` 通过这种方式可以在应用程序里方便地调用特定图标[^2]。 #### 将 TTF 转换为 Base64 编码形式 如果希望减少 HTTP 请求次数或将字体嵌入网页或移动应用内部而不依赖外部链接加载,可以把 `.ttf` 文件转成 base64 数据 URI 方式引用。具体做法是从 UI 设计团队获取 iconfont 文件夹下的 `iconfont.ttf` 并将其转换成 base64 编码字符串[^3]。 #### 自动化工具辅助管理 Icons 更新 为了避免频繁手动下载最新版本的图标集造成不便,可以通过脚本实现自动化处理流程。利用 curl 命令可以从远程服务器上抓取所需图标数据保存本地;再配合 shell script (`downicon.sh`) 实现增量更新功能——即只同步新增加的内容而非全部替换旧有资料。最后还可以进一步简化操作过程,比如将执行该 Shell Script 设置成 npm task 来一键完成任务。 修改 package.json 文件内的 scripts 属性加入 `"dwIcon": "./downicon.sh"` 这样一条记录之后,便可通过命令行输入 `npm run dwIcon` 执行上述动作[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值