Categories
Icons and Icon Fonts
The explosion of devices and screen sizes has had an interesting effect on how designers and developers use icons on the web. Used well, icons can pack a lot of information into a small amount of visual real estate. They can help UIs communicate efficiently. For example, consider
32 Comments
The ‘conversation bubble’ icon is not only smaller than the word ‘Comments’, it is also easier to pick out in a sea of text.
One of the primary challenges facing icon designers is that their icons must display crisply when sized for different screens. When resized, especially to small areas, icons can become fuzzy or illegible. For the pixel aficionado, the only possible solution may be to hand tweak each icon for each display size. Even for a simple case (phone, tablet, and desktop screen sizes at low and high pixel densities), you may wind up with 6+ different versions of an icon. When you combine these variations with the need to style icons for different use cases (hovered, selected, disabled, etc), the number of icon renderings can quickly spiral out of control.
A 24×24 icon becomes blurry when resized to a 32×32 or 16×16 size.
Bookmark icon courtesy of
Resizing vs pixel-aligning at 32×32
The bookmark icon, used as part of a styled button
Traditionally, there have been two ways to cut down on the number of icon files. The first, using , replaces the resolution-dependent versions of an icon with a single vector. The second, combining multiple icons into a single , cuts down the number of files to manage during development and load during runtime. More recently, web fonts have become a convenient way of packaging vector icons into a single file. At their most basic, fonts just contain a bunch of glyphs, or vector shapes. For example, the
Strumpf contains the shape C to represent a capital ‘C’. Instead of storing glyphs for characters, icon fonts store glyphs for — you guessed it — icons. Since font glyphs are vector based, they will scale more cleanly than their rasterized counterparts. Although icons from an icon font must be monochromatic (unlike their SVG counterparts), they can be styled using CSS, just like any other text on a web page. Instead of rasterizing an icon at different sizes, using different colors, opacities and filters, you can simply style them.
Character Fonts
Under the hood, there are three main mechanisms icon fonts use to replace markup with font glyphs. The first, and simplest, just maps standard latin characters to the icon glyphs. Instead of replacing the character ‘C’ with C, replace it with
. You can use an icon font like this the same way you would use any other web font.
@font-face {
font-family: 'IconFont';
src: url('icon-font.ttf');
font-weight:
font-style:
&span style='font-family: IconFont'&C&/span&
Note that the above web font incantation has been simplified from the . The weather icon font
uses this type of font encoding, substituting, say, a sunshine icon for the letter ‘B’.
Private Use Fonts
While these fonts display correctly, they can cause a disconnect between a page’s markup and visual representation. After all, the letter ‘B’ doesn’t really map to our idea of sunshine. This disconnect can cause problems for developers trying to understand the code, search engines attempting to parse it, and screen readers assisting the visually impaired. The second method of icon font encoding gets around this problem by using characters that have no semantic meaning. The
standard defines some characters for . These characters have no standardized meaning, and font developers can assign custom glyphs to them. When developers, screen readers, or search engines encounter one these characters, they should either ignore it, or interpret it as having a custom meaning within the markup. The markup using this method would look something like:
@font-face {
font-family: 'IconFont';
src: url('icon-font.ttf');
font-weight:
font-style:
&span style='font-family: IconFont'&&/span&
There are two small annoyances to this method (think of them as opportunities for improvement). The first is that these characters need to be escaped as numbers, since you can’t type them on your keyboard. The second is that each icon does have a meaning we are unable to convey through the markup. If you saw ‘’ in some HTML, I’m guessing your first reaction wouldn’t be “Oh, that must be a comment icon.” Unicode does provide some
that can help machines parse markup, and the best of these icon fonts tend to map to them when possible. Most also provide human-friendly classnames that utilize pseudo-elements and the content property under the hood. For example, the markup might look like
.icon-comment:before {
font-family: IconF
content: '\e02d';
&span class='icon-comment'&&/span&
Examples of these types of icon fonts include
Ligature Fonts
There is an alternative solution to the problem of creating more human-friendly markup using , part of the new . Ligatures enable a font to substitute a single font glyph for multiple markup characters. Used in the traditional sense, ligatures combine adjacent characters into more visually pleasant forms.
Traditional ligature example from
However, ligatures also make it possible to replace, say, ‘comment’, with the glyph
. You have a literal description of the icon as part of the markup, which makes it easier to understand for developers, screen readers and search engines.
@font-face {
font-family: 'IconFont';
src: url('icon-font.ttf');
font-weight:
font-style:
&span style='font-family: IconFont'&comment&/span&
A couple icon fonts are already experimenting with this method, including
and . It is important to note that because they are a new feature, ligatures are not yet fully supported .
Icon fonts offer an interesting solution to the problem of icon management. They do have certain strengths and weaknesses to consider when looking at them for a project. They are stylable, scale well, and can help reduce the clutter of individual files. On the other hand, people are used to working with individual image assets because the workflow can be simple and fast. Right now, the biggest challenge may simply be that icons are more frequently distributed as individual assets rather than packaged as a font. As more and more icon fonts become available, however, I think we’ll see them playing an increasing role in web development. If you’re interested in learning more, check out
icon fonts, or create your own over at .
This entry was posted in .
Copyright & 2012 Adobe Systems Incorporated. All rights reserved.使用SVG中的Symbol元素制作Icon - 博客 - 伯乐在线
& 使用SVG中的Symbol元素制作Icon
| 分类： ,
| 标签： ,
随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来，我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间，任何设备上都能清楚的，高效的传递信息给用户。
而随着各种高清视网膜屏幕的出现，现在web设计也需要考虑各种高清屏幕的显示效果，同样前端在代码实现的时候也需要根据屏幕的不同来输出不同分辨率的图片。为了使我们的网页能够适配视网膜屏幕上的高分辨率，在前端开发中一般需要准备两套不同尺寸的图片来应对，一套在普通屏幕上显示；一套在高清屏幕上显示。
为了解决屏幕分辨率对图标影响的问题，字体图标即icon font顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言，使用字体来制作图标可以不受于屏幕分辨率的影响，这对于现在各种分辨率屏幕的移动互联网时代，比起用图片来说确实有很大的优势。所以现在在web开发中，使用字体来制作icon应用的也越来越多。
难道我们只有这一种选择么？No，追根溯源，其实字体图标也是一种基于矢量图形的一种技术封装而已。这篇文章我们就来看看使用正宗的矢量图形SVG来制作icon的应用，看过之后相信你会有一种“拈花微笑,飞叶伤人”的感觉。
随着高清屏幕的普及，相比使用png等位图而言，使用SVG等矢量图形是一种全新的设计方式。更重要的是相比位图而言，SVG有着无可比拟的优势。这里我总结一下SVG具体的一些优势：
SVG是矢量图形文件，可以随意改变大小，而不影响图标质量。
可以用CSS样式来自由定义图标颜色，比如颜色/尺寸等效果。
所有的SVG可以全部在一个文件中，节省HTTP请求 。
使用SMIL、CSS或者是javascript可以制作充满灵性的交互动画效果。
由于SVG也是一种XML节点的文件，所以可以使用gzip的方式把文件压缩到很小。
其中使用SVG来制作动画更是令人神往，由于SVG是一种类似DOM节点组成的文本文档，所以我们可以很精细的控制SVG图形的每一个部分，并且可以使用CSS3或者是javascript来制作动画效果。下面我们就来看一个使用SVG制作的动画，如下图所示：
想看它在web上的真实效果么，请扫描下面的二维码：
开始之前，可以先下载基本的html和svg代码，
在web开发中，SVG主要有下面几种使用方法：
使用img和object标签直接引用svg。这种方法的缺点主要在于要求每个图标都单独保存成一个SVG文件，使用时也是单独请求的，增加了HTTP请求。
Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，而且具有非常好的可调性。Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
SVG Sprite。这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
最后就是本文的主角啦。使用svg中的&symbol&元素来制作icon。
现在，我们着重介绍的是使用svg中的&symbol&元素来制作icon，在上面说到的SVG Sprite中，我们需要使用相对位置来控制哪个图标被显示出来，但是SVG本身的定义是允许你可以使用&use&的方式直接引用SVG中的某一部分。
那么&symbol&元素是什么呢？按字面意思的话是符号的意思，如果把一个SVG文件比喻成一个书柜的话，那么&symbol&则就表示书柜中一本本不同类别的书籍。这些一本本不同类别的书本就是我们要使用的&symbol&图标。
下面的代码就是将多个SVG图标整合成一个SVG文件之后的样子，可以看到代码中有不同类别的&symbol&元素，它们就是我们要引用的图标：
每个Symbol设置一个id作为引用时的名字。使用id引用这个SVG中的Icon有两种方法。
第一种，将上述SVG作为body的第一个元素插入在HTML中， 此后，在需要显示某个 Icon 的地方插入下面的代码即可：
第二种是，是使用完整路径引用Icon。 也就是：
这种方法不需要像Sprite那样繁琐的设置图片的位移。使用id命名图标并使用时直接使用id引用既直观又简单。
自动化合并工具
问题来啦，如果碰到很多的图标，难道我们都要手动去合并为一个SVG吗？当然不用。
这里介绍一个专门用于处理SVG Symbols用的glup插件。
下面我们就来以一个实例一步一步来使用下这个插件。
首先新建一个文件夹，目录结构如下图所示：
svg文件夹是用来存放svg格式文件的。
当然首先是你得有glup环境，至于glup环境的安装这里就不再阐述了，详细的安装使用教程可以去看看。
然后在你的项目目录下运行下面的命令安装插件：
最后在你的项目目录新建一个**gulpfile.js**文件，写入下面的代码：
ok。基本的环境搭好啦，正所谓，巧妇难为无米之炊。上哪找svg图标去呢？ 这里推荐去 这个专门提供矢量图标网站下载矢量图像，重要的是它提供SVG格式的图形下载。
我们这里就以icomoon.io为例，首先是点击你需要下载的图形，选中它，然后点击下载按钮：
点击下载svg：
然后按照我们上面的配置文件，我们把下载好的svg图标放到svg文件夹中。
一切准备就绪，在你的项目目录中，运行gulp sprites命令：
运行命令之后，它会在你的目录中生成一个svg文件，用你常用的代码编辑器打开svg文件，可以看到svg图标都被合并到一个文件中。并且根据对应SVG文件的名称生成了ID，如下图所示：
那怎么使用呢它们呢？直接在html文件中使用，并且可以直接使用css来定义宽高、填充颜色等属性。如下代码所示：
不过由于浏览器安全策略限制的原因，我们不能在本地直接打开html文件来预览我们引用的svg文件，需要以服务器的形式来打开，用gulp也很容易搞定一个简单的服务器环境。首先我们需要安装gulp-connect这个模块，运行下面的命令：
然后修改下gulpfile.js文件中的配置项：
运行gulp webserver命令，打开localhost:8080，就可以看到我们引入的svg图标了：
为了更能直接体现使用SVG来作为图形格式的优势，我分别把上面的三个图标放大到十种不同的尺寸，具体结果请毫不犹豫拿起你的手机，扫描下面的二维码。会发现依然清晰可见：
综上所述，使用SVG Symbols的方式来制作图标比使用字体图标有着无可比拟的优势。更重要的是SVG中的每一个path元素都可以单独控制，这可以给我们带来什么呢？点击下面的图片你就知道使用SVG来制作图形元素带来的魅力啦。
我觉的在移动端完全可以普及使用了，主流的安卓和苹果的浏览器都支持SVG。
参考文章：
微信关注: iProgrammer
最热门的技术类微信公共账号之一，全文推送精选技术文章。扫描加关注，碎片时间学习新技能！
testcase_1 = [2, 5, 1, 2, 3, 4, 7, 7, 6]...
汇集优质的Python技术文章和资源。人生苦短，我用Python！
JavaScript, CSS, HTML5 这里有前端的技术干货！
关注安卓移动开发业界动态，分享技术文章和优秀工具资源。
关注iOS移动开发业界动态，分享技术文章和优秀工具资源。
为作者带来更多读者；为读者筛选优质内容；专注IT互联网。
由数百名译者组成，立志翻译传播优秀的外文技术干货。
一个专门为IT单身男女服务的征婚传播平台。
收录优秀的工具资源，覆盖开发、设计、产品和管理等。
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线博客团队正试图以我们微薄的力量，把优秀的原创/译文分享给读者，做一个小而精的精选博客，为“快餐”添加一些“营养”元素。
欢迎关注更多频道
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选博客文章
– JavaScript, HTML5, CSS
– 专注Android技术分享
– 专注iOS技术分享
– 专注Java技术分享
– 专注Python技术分享
（加好友请注明来意）
网站使用问题
请直接询问或者反馈
& 2015 伯乐在线
赞助云主机， 赞助云存储Iconion: Converts Icon Fonts To Icon Files - 推酷
Iconion: Converts Icon Fonts To Icon Files
Icon fonts are quickly becoming a web design trend and there is a good reason for that. Instead of working with a load of files in different resolutions or large sprites to be controlled by CSS, we simply embed a special font. Creating icons with icon fonts gives designers the ability to manipulate the icons with CSS, and it can improve load times by up to 15%, and because they're vector in nature, they're infinitely scalable, while still being smaller in size than an image sprite.
But what if you need to use these icons in a desktop or mobile application? Or create a website favicon or multi-colored icon?
The only answer is old-fashioned image icons in png or ico format. Iconion allows you to convert any icon font into fantastic-looking png icons by adding color, shadow, background, gradient, stroke and many other fancy elements.
What you can do with Iconion?
With Iconion you can select icons from Font Awesome, Entypo, Linecons, Typeicons and any other symbol fonts you like. You can select any size, without having to worry about the size, 8px or 1024px, the images will be of the same crisp quality. Add style: Icon color, Icon shadow and Icon long shadow, Gradient, Stroke, Icon rotate, Background, Background color, Background gradient, Background shadow, Background border, Rotate. Or just apply one of awesome pre-made templates.
Your final result can be save as png, bmp, jpeg or ico files.
How to use Iconion
Iconion have an interface divided into 3 sections. The left part of the screen lets you select icons from the popular Typeicons, Linecons, Font Awesome and Entypo. But the developer promise to launch a future version that will allow users to work with any symbol font.
The right part which is the style section, allows you to select a style for your icons. There are a lot of fancy styles to choose from. Also, you can easily customize icon and background color, border, size, shadow, gradient and many other parameters. All the pre-made styles can be changed to your liking from an editor below the styles window.
Now, the middle part which is the &Preview & Save& section allows you to control the look of your icon by changing the &Icon& or &Background& properties in their respective tabs. After you are done with the editing, icons can be saved as images after a click on Save Icon button.
Iconion offers two licenses. One entitles you to use Iconion for free for non-commercial purposes. And the other one requires you to have a commercial license if you are going to use Iconion in a profit-oriented project.
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见