美文网首页
字体图标制作

字体图标制作

作者: 一wei渡江 | 来源:发表于2017-12-29 17:55 被阅读31次
  1. 生成网站https://icomoon.io/app/#/select

  2. 导入已有的字体文件 import to Set (可以单选或多选导入独立的svg文件或上次打包后生成的集合svg文件),如图:


    2.png
  3. 选择要打包的字体图标Select All


    3.png
  4. 选择好要打包的字体图标(红色矩形区域)以后,进行下一步操作,点击Generate Font


    4.png
  5. 进入当前页面,给每个字体图标命名


    5.png
  6. 命名完成后即可,点击Download按钮下载即可,如需设置前缀或样式格式,下载前点击Download旁边的设置按钮可见下图所示界面:


    6.png
  7. 按需要设置后,下载获取到一个zip文件,解压即可见您需要的字体图标和一个demo,生成字体图标完成。

  8. 生成react-native中react-native-vector-icon支持的字体图标引入文件:进入APP的node_modules文件夹,在.bin文件下,命令行下输入 generate-icon D:\work\YDT\icons\style.css --prefix=icomoon- --componentName=icomoon --fontFamily=icomoon >Icommoon.js
    D:\work\YDT\icons\style.css字体图标css的目录,prefix字体前缀,fontFamily字体名,Icommoon.js生成的js文件

8.1.png

注意前缀与后缀和命令的匹配

generate-icon D:\work\YDT\icons\style.css --prefix=icomoon- --componentName=icomoon --fontFamily=icomoon >Icommoon.js

相关文章

  • 组件化集成化

    制作图标字体 icomoon、可以自己导入svg制作字体。iconfont,

  • 阿里的字体库—iconfont

    阿里字体图标库介绍及图标字体的使用方法 这篇文章只讲阿里字体图标库的使用,暂不讲图标制作,阿里矢量图标库上的字体图...

  • 字体图标制作

    生成网站https://icomoon.io/app/#/select 导入已有的字体文件 import to S...

  • 制作字体图标

    制作字体图标 *zhangh * 2016-06-14 制作前 1.由于制作图标是要使用SVG格式的,所以建议,尽...

  • 关于前端,你会用到的网站

    转换ico图标:(用来制作title logo) .bitbug.net 字体图标下载地址: .comoon.io...

  • 手把手教你用 SVG 符号和 CSS 变量做出彩色图标

    简评:使用图片和 CSS 样式来制作网页图标的日子已经过去了,随着网页字体的爆发,图标字体成为展示图标的第一解决方...

  • css字体图标引入方法

    css字体图标引入方法在网页中将小图标制作成字体是很多网站的常用做法,为的是减少页面请求。 先推荐一个字体图标库(...

  • 项目中添加自定义字体图标

    标签(空格分隔): css 有的时候项目中的字体图标并不能满足自己的需求,需要自己制作字体图标 前提: UI提供s...

  • 图标字体制作

    软件:IcoMoon 步骤: 进入右上角icoMoon App 左上角Import Icons,导入svg图标文件...

  • 字体图标制作流程

    公司现在已有一整套的Icon,那我们应该如何绘制一个Icon,让其风格与之前的保持统一呢。 | 在设计icon时,...

网友评论

      本文标题:字体图标制作

      本文链接:https://www.haomeiwen.com/subject/olhwgxtx.html