iconfont阿里巴巴矢量图标库app如何使用-iconfont阿里巴巴矢量图标库app使用教程详解
最新回答
星空伪装的忧蓝
2020-05-09 05:51:27
iconfont阿里巴巴矢量图标库app使用教程详解
一、注册与登录
首先，访问iconfont官网（
iconfont.cn
），完成账号注册并登录。注册需填写有效邮箱或手机号，通过验证后即可进入平台。二、浏览与选择图标
- 浏览图标库：首页提供官方图标库、用户自定义库及多色图标库分类，支持通过关键词模糊搜索快速定位目标图标。
- 加入购物车：点击图标进入详情页，点击“加入购物车”按钮。完成选择后，点击右上角购物车图标进入管理页面。
三、下载图标
- 下载文件：在购物车页面，可选择将图标添加至项目、下载矢量图（SVG/AI）或字体文件（TTF/WOFF）。选择“下载文件”后，获得包含iconfont.css、iconfont.ttf等文件的压缩包。
- 解压文件：解压后，iconfont.css为样式文件，iconfont.ttf为字体文件，其他格式（如SVG）按需使用。
四、引入图标到项目
- 引入CSS文件：将iconfont.css放入项目static文件夹，在代码中通过<link>标签引入，或直接在样式文件中@import。
- 替换字体为Base64（可选）：若需嵌入字体，将iconfont.ttf转换为Base64编码，替换iconfont.css中@font-face的src属性。
- 使用图标：
Unicode方式：在HTML中直接使用图标的Unicode编码（如）。
Font Class方式：通过类名引用（如<i class="iconfont icon-xxx"></i>）。
Symbol方式：使用SVG标签（需先在项目中引入SVG雪碧图）。
五、高效使用插件（如Pixso）
- 安装插件：在Pixso插件广场搜索“iconfont”，点击安装。
- 使用插件：打开Pixso工作台，启动插件后搜索图标，调整颜色、大小后直接拖入设计文件。
六、管理与修改图标
在iconfont平台可管理个人图标库，包括创建新库、上传图标、修改分类等。多色图标需在编辑器中调整图层颜色，保存后同步更新。
您可能感兴趣问答
热门标签
