admin 管理员组文章数量: 1184232
制作生成IconFont
前言
当设计稿有出现小图标时，如果以 img 或设置 background 等方法，图标会出现模糊状态，影响整体视觉。为了防止此类发生，推荐使用 IconFont。
一、 IconFont特点
- 图标清晰，无毛边，对于需要缩放多个尺寸的图标，是个很好的解决方案；
- 文件加载体积小；
- 可以直接通过
css的font-size，color修改它的大小和颜色； - 支持一些
css3对文字的效果，例如：阴影、旋转、透明度； - 兼容低版本浏览器；
二、 生成 IconFont
-
设计提供图标的SVG文件。
-
进入 icomoon（官网：/），在网页右上角找到
IcnMoon App按钮，点击进入。 -
将准备的 Icon 的 SVG 文件在左上角
Import Icons按钮点击上传。
-
可通过顶部 四个操作按钮对图标进行操作，依次功能为 选中、删除、移动 和 编辑图标。
-
通过点击图标或者右上角菜单栏中的
Select All选中全部图标。
-
点击页面底部
Generate Font按钮，进入生成图标页面，每个图标的信息都可再二次修改。
-
检查对比如果没有重复或命名错误等问题，就可点击页面下方
DownLoad侧边齿轮按钮进行最后的设置。
● Font Name：设置 IconFont 字体的名字
● Class Prefix：设置字体前缀，默认使用 icon-
● 其他设置按照项目要求设置，完成后关闭弹窗，点击 Download 下载
- 将下载文件解压，拷贝到项目src/assets/icons-font目录中，
icon-XXX为我们在项目中使用图标时class Name。（其中demo.html 可方便查看图标信息，主要使用的是style.css 文件及 font 文件夹。）
三、 使用 IconFont
- 在
App.vue中引入IconFont
<style lang="less" scoped>@import "~@/assets/icons-font/style.css";
</style>
- 组件使用
IconFont
<template><!-- icon-community 为图标名 --><span class="icon icon-community"></span>
</template><style lang='less' scoped>
// 通过font-size 设置图标大小
.icon {font-size: 28px;
}
</style>
四、 当项目已有其他IconFont
在实际项目中，每次的图标都会不一样，这时需要在原本的IconFont追加新增的图标，保证原本的图标可用的同时，也检查生成的IconFont 或 命名 是否与之前图标有冲突。
-
打开官网，先把原本的svg图标（src/assets/icons-font/fonts/industry.svg）通过
IcnMoon App按钮导入，再导入新增图标。 -
后面的操作还是按照上面的操作依次执行操作，需要注意的是，检查原本图标命名是否与原本命名相同，且与新增图标无冲突。
本文标签： 制作生成IconFont
版权声明：本文标题：制作生成IconFont 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698030354a283566.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论