今天学到一招,所以决定简单写写如何利用图标字体生成器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. 【视频教程】使用UIAutomation开发软件外挂

    UIAutomation是.Net 3.5之后提供的“界面自动化测试”技术,本来是给测试人员用的,不过UIAutomation由于也是界面自动操作的技术,比直接使用keybd_event.GetWin ...

  2. 如何重载delegate

    在写delegate的时候遇到一个问题,在已有一个不带参数的delegate基础上,试图再增加一个带参数的delegate,结果VS报了“already contains a definition f ...

  3. java提高篇(三)-----java的四舍五入

    Java小事非小事!!!!!!!!!!!! 四舍五入是我们小学的数学问题,这个问题对于我们程序猿来说就类似于1到10的加减乘除那么简单了.在讲解之间我们先看如下一个经典的案例: public stat ...

  4. easy-ui 小白进阶史(二):操作数据,easy-ui操作

    easy-ui的操作及交互: Html: @using LangBo.Facade; @using LangBo.DataDefine; @using System.Threading.Tasks; ...

  5. 浏览器 的 session 如何保持?!

    http://qindingsky.blog.163.com/blog/static/3122336200832853116360/ 在谈论session机制的时候,常常听到这样一种误解“只要关闭浏览 ...

  6. Permission is only granted to system apps

    原文地址http://jingyan.baidu.com/article/9113f81b2e7a8c2b3314c711.html

  7. Atitit 桌面软件跨平台gui解决方案 javafx webview

    Atitit 桌面软件跨平台gui解决方案 javafx webview 1.1. 双向js交互1 1.2. 新弹出窗口解决1 1.3. 3.文档对象入口dom解析1 1.4. 所以果断JavaFX, ...

  8. iOS-数据持久化基础-JSON与XML数据解析

    解析的基本概念 所谓“解析”:从事先规定好的格式串中提取数据 解析的前提:提前约定好格式.数据提供方按照格式提供数据.数据获取方按照格式获取数据 iOS开发常见的解析:XML解析.JSON解析 一.X ...

  9. python学习 变量的操作 与 基本数据类型

    一变量(本文使用python3.5): #变量:是计算机内存中的一块区域,变量可以存储规定范围内的值,变量可以改变#在python中变量是计算机内存中数据的引用 python的变量没有明显的类型,具体 ...

  10. java 类之间的关系

    一.继承 二.实现 三.组合