今天学到一招,所以决定简单写写如何利用图标字体生成器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. 使用Ant自动化我们的java项目生成

    现在我们已经了解如何定义属性.依赖关系以及如何运行ant,接下来我们将学习怎样使用ant编译java源代码并生成jar文件. 编译源代码 由于Ant的主要目标就是生成java应用程序,它内置了java ...

  2. win7升级为Win10 10586版本,出现应用商店打不开的解决办法

    把公司的win7升级为了win10,但是打开应用商店时是白的,什么都没有,过一会之后,会有提示信息. 报的错误是: 错误代码:0X80072ee2 最后,我的解决办法是: 首先,咱们返回到win10 ...

  3. Spring Trasnaction管理(3)- 事务嵌套

    问题导读 Spring 如何管理嵌套的事务 Spring事务传播机制 Nested 和 RequireNew 有何区别 事务传播机制 事务的传播机制应该都比较熟悉 在日常开发中会遇到需要事务嵌套的情况 ...

  4. Java连接Oracle数据库开发银行管理系统【三、实现篇】

    说明:里面的主要代码都加的有注释部分,所以代码显得很长,如果有错误的地方,谢谢指出. 注意需要导入数据库jar包 ------------------------------------------- ...

  5. Javascript中构造函数与new命令2

    典型的面向对象编程语言(比如C++和Java),存在"类"(class)这个概念.所谓"类"就是对象的模板,对象就是"类"的实例.但是,在J ...

  6. HTML表单入门基础

    网页镶嵌: <iframe src="http://www.cnblogs.com/tfl-511/" width="200" height=" ...

  7. MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等

    返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...

  8. MVVM架构~knockoutjs系列之一些异常的总结(永久更新)

    返回目录 1 关于attr属性的问题 这个问题主要出现的IE7和360浏览器,使用attr时,需要为属性名加上单引号,代码如下: <a data-bind="attr:{'href': ...

  9. 正则表达式匹配/data/misc/wifi/wpa_supplicant.conf的WiFi名称与密码

    正则表达式匹配/data/misc/wifi/wpa_supplicant.conf的WiFi名称与密码: String regex_name="ssid=\"(.*?)\&quo ...

  10. win2003 64位系统IIS6.0 32位与64位间切换

    ASP.NET 1.1,32 位版本 要运行 32 位版本的 ASP.NET 1.1,按照以下步骤操作: 1.单击“开始”,单击“运行”,键入 cmd,然后单击“确定”. 2.键入以下命令启用 32 ...