Tips for Aligning Icons to Text

文本排列图标的技巧

Icons.They're popular. They help complement content (most of the time). And yet they can be a pain in the neck.

图标是一种主流。他们可以补充内容（在大多数的时间里）。但是他们也很让人痛苦。

Once you've decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you're coding.

当你决定排版（可升级的矢量图或者图标字体）和设计设定，还有其他的考虑，其中许多因素出现在你的编码。

Here's an excellent question that comes up often along those lines:

这里有一个极好的问题被提出经常沿着那些代码行：

@chriscoyier #smashingconf any recommendations on how to align #svg icons to text? @chriscoyier有任何建议对齐文本？ — Andreas Sahle (@pixelmord) October 20, 2015

Tricky, right? Aligning icons can be a tough task especially if you are not the one charged with designing the icons. I have to be honest and say that I thought this would be a simple question to answer and one that could be done in a tweet. However, there's much more to finding the perfect alignment between icons and text.

狡猾，对吧？对齐图标是需要忍受的事尤其是你不负责任的设计图标。我可以诚实地说我认为这将是一个简单的问题来回答，另一个可以在微博上做。无论如何那里可以找到完美的排列在图标和文本之间。

Thankfully, there are a few universal tips we can put to use to ensure our icons always line up beautifully with text.

非常感谢，这里有一些普遍的技巧，我们可以投入使用,以确保我们的图标总是与文本排列的漂亮。

Tip 1: Decide on an icon format and stick to it

技巧1：决定一个图标的格式

I take for granted that there are other ways to do icons other than SVG. There are actually quite a few methods, if you include ones that might be considered old, as in, "That's soooo 2011!" A few examples:

我理所当然的是,还有其他的方法可以做到除了SVG图标。实际上有不少方法,如果包括那些可能被认为是旧的,如“这是如此如此的2011!”几个例子:

Regardless of your preference (cough, SVG, cough!), the format of your icons will have a lot to do with how you align them to text. Let's say all your icons are contained in a sprite. That means the icons are pretty much set at fixed dimensions (unless you start large and use background-size to scale down) and it would be much easier to adjust the size and line-height of your content to match that of your icons.

不管你偏爱(cough,SVG,cough!)你图标的格式会有很多与你如何对齐文本有关。假设你所有的图标都包含在一个精灵里。那就意味着图标都设置在固定的尺寸(除非你使用背景图像尺寸的缩减)它会更容易调整的你的内容大小和行高用来匹配你的图标。

The beauty of something like SVG is that it is scalable by nature and affords you the ability to reply more on CSS to help align things rather than the design process.

类似SVG的美妙之处在于,它是通过自然和提供你能够回复CSS的能力来帮助对齐的事情而不是设计过程的可扩展性的。

The lesson here: choose one format for all icons and use that as the basis for how you will approach aligning them to text. Your code will much more maintainable and your designer (or your inner designer) will thank you.

课在这：选择格式给所有的图标和使用，做为你的如何对齐文本的基础。你的代码更加容易的来维护和设计师（或者你的室内设计师）将会感谢你。

Tip 2: Use similarly sized icons

技巧2：使用同样大小的图标

Here's an ideal situation: all icons are the exact same size. Let's say all the icons in a set are 100px square. That tells us exactly how much space we're dealing with and makes alignment a breeze.

理想情况:所有图标大小都完全相同。假设所有的图标在一组100 px正方形里。告诉我们有多少空间我们可以处理,使其轻而易举对齐。

We also know that is not always a practical rule. Icons can take up varying amount of space depending on what we're communicating.

我们也知道,并不总是实用的规则。图标可以占用不同的空间量取决于于我们的交流。 icons

The map icon is narrower than the avatar icon which is narrower than the cart icon. If you're like me, then you will eliminate the white space around an icon to ensure the smallest file size possible. That's great, but now we have icons with different dimensions. That's a-ok if we're working with SVG but less desirable for non-vector formats, like PNG. We can tell SVG to occupy a fixed amount of space without losing resolution, but non-vector will stretch and distort the image if we are working with inconsistent dimensions.

地图的图标和电影阿凡达的图标哪个比马车的图标更加狭窄。如果你像我一样,你会在图标的周围消除空白的部分来确保最小的文件大小。这很棒，但是现在的图标带有不同的规模。这是完美的,如果我们使用向量格式SVG但少数是不可取的,像PNG。我们可以说SVG占据了一个固定的空间不会失去分辨率,但向量在图片中将拉伸和扭曲形象，如果我们对规模处理的不一致。

The right thing to do here is to match your icon design specs to the format being used. If using SVG, then the icon can be any size, but try to use a consistently sized art board in Illustrator (or your design tool of choice). This will help keep future icons in the set to scale.

正确的做法是匹配你的图标设计，规范所使用的格式。如果使用SVG,图标可以是任何大小,但是尝试使用一致的相比起解说者的涂料纸板(或者你的设计选择的工具)。这将有助于保持未来的图标集的规模。

If using non-vector, then always use the same dimensions. The icons may differ in how much space they occupy, but it will ensure your icons are always crisp and proportional, regardless of the text next to it.

如果使用向量,然后总是使用相同的维度。图标可能会占用的空间不同,但这将确保你的图标总是新鲜的和均衡的,不管下一个文本。

Tip 3: Match your font-size to the size of the icon set

技巧3：你的字体尺寸和图标尺寸要相互匹配

Icons ought to be treated a lot like typography. They're either used in conjunction with text or in place of it, so setting the size of the icon to the size of the text next to it is important for the same reason we like consistently sized letters: legibility.

图标应该像对待排版一样。他们任何一个与文本结合使用或代替它,所以设置的图标的大小去设置文本的大小，之后这是非常重要的我们坚持喜欢相同大小字同的原因:易读性。

This doesn't mean icons need to be 16px if your content font size is also 16px. What it means is being aware of the font size and making sure your icons complement it nicely, whether it is larger, the same size, or smaller than the the text.

如果你的内容字体大小是16 px，这并不意味着图标需要16 px。这意味着意识到的字体大小和确保你的图标漂亮的补好，无论是最大，一样大，比文本小。

Here's an illustration of the difference between an icon that has been aligned nicely to the size of the content versus one that has not.

这里有一个例子关于图标之间的差异，已经排列好一个没有对抗内容的大小。 !

The example on the left is much more consistent with the content font size and has better alignment than the right, despite both examples technically being aligned.

左边的例子比右边的内容大小和对齐方式更符合,尽管这两边的对齐方式是一致的。

Tip 4: Use CSS to fine tune the appearance

技巧4：使用CSS能更好的调整外观

When all is said and done, there is a solid and simple recipe for getting icons exactly where you want to line up with text:

结果，固定的单方面的让图标更好的结合文本： !

That is the difference between icons that look in perfect alignment with text and icons that look slightly off.

图标之间的区别是，文本和图标与完美只有一点点的偏离。 !

Tip 5: Use class names for specific icons

技巧5：使用类名来明确图标

The example above is great but you may have noticed that the location icon looks so gosh darn narrow and even further from the text labels than the music note. How annoying!

上面的例子是伟大的但你可能已经注意到，位置图标看起来文本比音符更加的该死的狭窄。多么令人讨厌！

This is where CSS on a per-icon basis can bail us out.

CSS可以在每一个图标的基础上来拯救我们。 !

Phew, that's much nicer!

唷，那是更好的！ !

Wrapping Up

总结

If there's a lot more to aligning icons to text than you expected, then you are not alone. The simple answer is that it really depends on what method you choose to create the icons. The CSS is pretty straightforward from there.

如果有更多比你预期对齐图标的文本，那么你就不再孤独了。简单的答案是，它取决于你选择用什么方法来创建图标。CSS是非常简单的方式。

The answer to this question inly pertained to text but there are other elements where aligning icons comes into play, such as buttons, form fields, navigation and probably many other things. I mean, what about responsive designs, right?! Regardless of the scenario, I find that the five tips we covered here get me out of the weeds.

这个问题的答案主要涉及到文本，但也有一些其他的元素来对齐图标，如按钮、表单、导航和可能有许多其他的因素。我的意思是，反应性的设计，对吗？不管怎样，我发现我们在这里所覆盖的五个秘诀让我从杂草中得到。