使用Fontello仅加载所需的图标字体

It is commonplace to see icon fonts used for a range of simple graphical elements around the web, from the display of social media icons inside sharing buttons on a website to a speech bubble icon that tells readers about the number of comments on an article.

从网站上共享按钮内部的社交媒体图标的显示到告诉读者文章评论数量的气泡图标，在网络上看到用于一系列简单图形元素的图标字体是很平常的事。

There are a number of features that make icon fonts so useful. Firstly, unlike regular images, font icons have no pixelation on high-resolution screens. They can scale up as much as needed without blurriness. Secondly, a lot of their properties can be controlled directly using CSS. You can change their size and color, or apply text-shadows with a few lines of CSS. They are also much easier to use than image sprites.

有许多功能使图标字体如此有用。 首先，与常规图像不同，字体图标在高分辨率屏幕上没有像素化。 它们可以根据需要按比例放大而不会模糊。 其次，它们的许多属性都可以使用CSS直接控制。 您可以更改它们的大小和颜色，或使用几行CSS来应用文本阴影。 它们也比图像精灵更易于使用。

Before getting too deep into icon fonts, if you are starting a new web design from scratch, keep in mind that using SVG images might be a better approach. We’ve explored a comparison of the two approaches here at SitePoint in the past. SVG images have some clear advantages, for example, you can create multi-color icons and your SVG images can also look sharper than icon fonts. On the other hand, if your project needs to support legacy browsers or your team has not yet taken the step of changing its workflow to accommodate SVG icons, it is worth looking into ways in which it’s possible to optimize the use of icon fonts at least.

在深入研究图标字体之前，如果您要从头开始进行新的Web设计，请记住使用SVG图像可能是一种更好的方法 。 过去，我们在SitePoint上探索了这两种方法的比较。 SVG图像具有一些明显的优势，例如，您可以创建多色图标，并且SVG图像看起来也比图标字体更清晰。 另一方面，如果您的项目需要支持旧版浏览器，或者您的团队尚未采取更改其工作流程以适应SVG图标的步骤，那么值得探讨的方法至少可以优化图标字体的使用。 。

If you have worked with icon fonts before, you have most probably used or heard about Font Awesome. In version 4.7, Font Awesome provides 675 different icons for users to use in their projects. The icons provided by this font range from Facebook and Twitter icons to objects like a bathtub and thermometer. The only problem? You won’t probably use all 675 icons in a single project. Loading the whole font file just to use about 10 or 20 icons increases the page load time unnecessarily. This issue is not specific to just Font Awesome but most icon fonts in general.

如果您以前使用过图标字体，则最有可能使用或听说过