今天学到一招,所以决定简单写写如何利用图标字体生成器IcoMoon把自己制作的图标变成字体,下面以OSChina的图标为例。

一、确保logo转成纯色,并保存为svg格式

因为OSC的logo是绿色带描边的,所以先在Illustrator里面把logo变成纯色路径,这里我用的黑色。还有因为字体属于矢量文件,所以把logo存储为.svg格式的文件方便接下来的导入。


二、进入IcoMoon,导入刚刚保存的svg文件


三、编辑图标名称

点击edit按钮,选中我们刚刚上传的图标修改tags属性可为图标加上标签。第一个tag名将是这个图标的名称,不过现在暂时只能接受英文命名。如果不修改tags,到时候字体的class名就是icon-untitled,所以建议还是修改一下。


四、创建字体,并下载相关字体文件

到这里,字体创建已经完成,你可以解压文件预览下效果了。

今天这里只是讲了把一个图标变成字体,同样你可以把你设计好的成套的图标通过上面的方法全部转化成一个字体,通过相应的class对其进行访问。只是你需要注意确保每一个图标尺寸大小相同,这样才能得到一致的图标。你也可以参见《如何把你的图标转换成web字体》。

简单几步把LOGO变字体的更多相关文章

  1. 【转】简单十步让你全面理解SQL

    简单十步让你全面理解SQL 很多程序员认为SQL是一头难以驯服的野兽.它是为数不多的声明性语言之一,也因为这样,其展示了完全不同于其他的表现形式.命令式语言. 面向对象语言甚至函数式编程语言(虽然有些 ...

  2. 【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】

    说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...

  3. 简单几步配置gitlab

    简单几步配置gitlab 之前配置gitlab需要很多步骤,要装apache2.ruby.tomcat.mysql等一片东西.有没有更简单的方式呢?现在可以借助bitnami,简化了很多. 可以参考v ...

  4. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  5. 大麦盒子(domybox)无法进入系统解决方案!【简单几步】

    大麦无法进入系统解决方案![简单几步]前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由器下的网络! 前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由 ...

  6. 如何将新项目添加到github仓库中?只需简单几步~即可实现

    问题描述:新建了一个项目,如何将其设置为git项目?如何关联到github上的仓库? 只需简单几步,但前提是需要已经安装好了git,并且有github账户 本文使用IntelliJ IDEA 其他编辑 ...

  7. 简单几步实现 IOS UITextField输入长度的控制

    在ios开发过程中,我们有时候需要对UITextField的输入长度进行控制,比如输入手机号码最大长度为11位等,而ios自身又不像android那样可以设置输入框的输入长度,接下来通过简单几步实现这 ...

  8. 简单三步同步你的 VSCode 用户配置

    https://www.cnblogs.com/knight-errant/p/10444777.html 设备重装,换设备,VSCode 又要重新配置了?不不不,简单三步,让你的 VSCode 配置 ...

  9. Hexo + Serverless Framework,简单三步搭建你的个人博客

    很多人都想拥有自己的个人博客,还得看起来漂亮.酷酷的.尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分.这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单3min即可 ...

随机推荐

  1. c语言编译器(linux平台下安装c语言环境)一

    gcc : 语言的默认编译器     (ubuntu下输入gcc,可根据终端输出查看是否安装了gcc) g++ : c++的默认编译器   (ubuntu下输入g++,可根据终端输出查看是否安装了g+ ...

  2. 【ContextMenu】DataContext不自动更新

    参考资料 http://www.orcode.com/article/Presentation_20147076.html      问题现象 通过绑定集合至ContextMenu的ItemsSour ...

  3. [教程]怎么用百度云观看和下载"磁力链接"无需下载直接观看.

    1, 打开网址 http://okbt.net/  输入你想要看的电影名字, 点搜索,鼠标右键点击拷贝磁力链接.或者 电脑装了迅雷的话.可以直接点击.用迅雷下载. 磁力链接都是这种格式的.例: mag ...

  4. [专业名词·硬件] 1、等效串联电阻ESR概述及稳压电路中带有一定量ESR电容的好处

        一.等效串联电阻ESR概述 ESR是Equivalent Series Resistance的缩写,即“等效串联电阻”.理想的电容自身不会有任何能量损失,但实际上,因为制造电容的材料有电阻,电 ...

  5. Hello Mybatis 02 mybatis generator

    接着上一篇文章通过Mybatis完成了一个User的CRUD的功能之后,这篇开始还需要建立一个Blog类,这样就可以模拟一个简单的微博平台的数据库了. 数据库准备 首先我们,还是需要在数据库中新建一个 ...

  6. tr

    参照http://www.cnblogs.com/djcsch2001/archive/2011/05/08/2040255.html tr -options set1 [set2] ---- set ...

  7. Java连接Oracle数据库开发银行管理系统【一、需求篇】

    此系统开发共分为三篇完成. 第一篇[需求篇]:效果展示图,也就是需求部分的展示 第二篇[设计篇]:需求分析和类,接口的设计 第三篇[实现篇]:具体代码实现

  8. Linux~centos上安装.netcore,HelloWorld归来!

    对于跨平台的.netCore来说,让它的程序运行在Linux系统上已经成为必然,也是一种趋势,毕竟我们的很多服务都放在linux服务器上(redis,mongodb,myql,fastDFS,luce ...

  9. fir.im Weekly - 除了写代码,还需要了解什么

    雾霾天,宜撸代码.吹牛,不宜出门约会(¬_¬)ノ 本期 fir.im Weekly 亦如往期,收集了优秀的  iOS/Android 开发资源,GitHub 源码.前端方面的热点分享.除了代码,也许你 ...

  10. Jquery判断数组中是否包含某个元素$.inArray()的用法

    判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时,返回该元素在数组的下标,不存在时返回 -1 示例代码 ...