如何把你的图标转换成web字体

在这篇教程中,我们将看看如何使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体。然后在看看如何使用生成的字体通过css应用到Web页面中。
使用字体图标的优势
字体图标除了图像清晰度之外,比位图还有哪些优势呢。
适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。
可扩展性:图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标,然而,使用位图,你必须得为每个不同大小的图像输出一个不同文件。
灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。他们还可以在任何背景下显示。
兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里。

操作方法

  • 01

    1、准备你的插图 首先,你需要能创建矢量图标的程序,并且能够找到输出SVG格式,比如“Illustrator”或者“iNkscape”。 当你设计的时候,你可以使用任何你喜欢的颜色,但是图标必须是一个纯色。确保每个图标的尺寸大小是相同的。有一个图标更高或者更宽,会很难创建一个一致的字体。在这里,我们不得不减少飞艇图标的宽度,以便它匹配其他图标。

  • 02

    2、清理 仔细检查每一个图标,以确保它没有缺陷——细节在小尺寸上是完全的,当你放大的时候小的缺陷就能被发现。在所示图标,我需要删除参差不齐的路径。 在Illustrator中,使用Pathfinder工具统一层叠元素,减去前面元素,比如这些图标中的星星图标。 关键的原则是确保你的图标是可读的小尺寸。心可能的简化。

  • 03

    3、导成svg 现在,选择一个图标,并将它复制粘贴到一个新的文档场景中(例如200px X 200px)。缩放也是符合。你可能会发现它有一个基线尺寸的设置。使用彩色的图标,比如说在白色的背景中使用黑色的图标。 现在,选择菜单“文件”中“保存”,并选择将文件保存成“SVG”格式。使用默认的SVG设置。一旦你这样做,所有的图标,你可以创建一个Web字体。

  • 04

    4、导入到IcoMoon 打开IcoMoon Web app。 导入一个图标,点击“Imort icons”按钮,然后选择您想要添加的SVG文件——您也可以一次添加多个文件。这些图标将会出现在“Your Custom Icons”区域中。如果他们是高亮的黄色显示,表示这些图标是你将要创建的图标字体。在这个例子中,你可以看到,我不仅导出我自己创建的图标,我还在 “Mini-icons”中添加了别的图标。

  • 05

    5、从IcoMoon中导出字体 如果你想调整图标的位置、大小或旋转,你可以点击“Edit”按钮。可以使用“Save Copy”按钮来创建图片的变化(例如,一个镜像的衅标)。添加一个有意义的图标标记,因为这将被用来生成类名。 当 你都准备好了,点击屏幕底部的“Font”按钮开始生成字体。这样你就可以指定哪个图标映射到哪个字符上,例如,如果你要设置一套六个旋转的球,你可以每 这六个球分别指定字符:q、w、e、r、t和y。你也可以根据你自己的爱好选择一个字体的名字。你也可以调整字体的指标,除非你要设置你息定的字体和标准 文本,不然你真的不需要担心这个。

  • 06

    6、下载字体文件 单击“Download”下载字体包到你的电脑上。他有一个字文件夹包含了字体本身(woff,eot,ttf格式),以及一个HTML示例页面和相应的CSS。甚至还有一个javascript文件和一个解决方法,如果你需要支持IE或IE7。 将 font文件夹复制到你的网站,为你的项目添加字体。你需要从style.css文件中复制CSS样式,并粘贴到你网站的CSS文件中,但是我的方法是将 它重命名为font.css,并保持他作为一个单独的CSS文件。你需要的时候在把这个CSS文件引入到你的HTML中。

  • 07

    7、调用字体 正如你看到的样本文件index.html,有两种方法可以调用,一种是通字符(unicod或名称),另一种是通过类名。第一个例子使用了HTML5的data-icon自定义属性。 在这里,fs1类名用于设置字体的大小。这个“aria-hidden”属性有助于确保字符能屏幕阅读器读到。 第二种方法使用一个span元素: 这个方法是非常有用的,你的字符可以与文本在内联中一起显示。

  • 08

    8、先进的想法 正如我们刚刚悬停状下改变图标颜色一样,我们可以使用的颜色属性和字体属性修改图标。你可以设置其他属,比如文本阴影和透明度,来设置图标的效果。

(0)

相关推荐

  • Excel中如何将表格转换成图标

    Excel中如何将表格转换成图表呢?是非常简单的,下面小编来教大家. 操作方法 01 首先,我们打开我们电脑上面的excel,然后在表格中输入一些数据: 02 之后我们选中这些数据,然后点击插入: 0 ...

  • ico图标转换工具教程:png转ico和.ico转.png格式

    一般来说,ICO是Icon file的缩写,是Windows的图标文件格式的一种。所谓的图标(Icon)是一种特殊的图形文件格式,它是以.ico为扩展名的Windows中的图标文件,可以包含同一个图标 ...

  • 将PowerPoint转换成PDF的九款免费软件(附下载)

    概述:PDF拥有许多可用的免费阅读器软件,因此在工作中,很多人会选择将PPT、PPTX文件转化为PDF。在这里,编者搜罗了九款能够将PPT转化为PDF格式的免费软件,它们的特性不尽相同,它们中的一些还 ...

  • html怎么转换成pdf文件 html转pdf详细图文教程

    pdf是我们常见的文件保存格式,有时候由于工作需要,我们需要打印电脑上的某一个html网页,直接打印肯定是不行的,因此我们需要把html转换成pdf格式之后在打印,下边西西给大家分享打印方法! htm ...

  • Excel中的表格如何转换成Word表格的方法

    excel中的表格怎样转换成WORD表格 首先,用Excel编辑好一个表格,然后点击“文件”→“另存为web页”。web页就是网页文件,在“保存选项”处把“保存整个工作簿”调整成“选择:工作表”,把默 ...

  • 将excel表格直接转换成word的方法

    对于一些熟练使用WORD的办公族来说,一般使用表格都是直接画表格,但是却不知道我们可以先用EXELE把表格做出来,然后再倒入到WORD中,这样的话,对于很多办公族来说都省去了很多的时间。现在看看吧。 ...

  • jpg转换成pdf转换器图文使用教程

    迅捷jpg转换成pdf转换器是一款界面简洁,操作方便的JPG转PDF转换工具。JPG转PDF转换器可方便的将各种流行的图片文件格式如 JPG,BMP,TIF,PNG,GIF等转换成PDF文件。只需要将 ...

  • 如何在WPS文字轻松将大写字母转换成小写

    编辑文档的时候,我们经常会遇到这样的情况,英文大小写非常不规范,看起来很不舒服。如果想让这些英文字母统一大写或者是小写利用WPS文字我们可以轻松搞定。下面一起来看看方法吧! WPS文字轻松将大写字母转 ...

  • 如何将PDF转换成Word 迅捷PDF转换成Word转换器使用图文教程

    在工作生活中,大家经常会需要录入一些资料到电脑上,对大家来说,这是一件非常繁重的工作。现在社会有非常多的编辑者和文员,他们每天的工作大部分都与录入相关,十分的辛苦。上海互盾科技信息有限公司为了解决用户 ...