我需要的字体真棒有微调的图标。
我可以包括整个字体真棒库。但是,那不是只是一个图标的矫枉过正?有没有一种方法,只包含一个图标或组件?这个问题似乎是,该库是不是模块化的,以不同的文件。例如,如果使用SCSS,所有图标都在_icons.scss文件,而不是在自己的文件中的每个图标。如果使用纯CSS,那么一切都在一个文件中。
你不能。一种字体是一个单一的文件,很象的图像或文档。不要紧,你如何将其包含在你的CSS - 用户仍然会下载整个字体文件。 CSS定义只是让你的网站上提供的字体。
有一些东西,你可以做作为替代。还有一些公司,将允许您生成使用自定义应用程序(如https://icomoon.io/,例如)的部分字体集。这可能会满足您的需求。但是,一旦你创建自己的字体的定制版本,它仍然是你不能分手的文件。尽管如此,icomoon的定制版本可以非常小,精简和可能会适合你描述的场景。
另一种方法是不要自己主办的字体,但使用基于云的字体,更容易被用户缓存。这本身并不是一个解决方案,但会增加成功的机会有所您的用户就不必专门下载字体为您的网站。
字体真棒V5支持部分的风格,在getting-started
页面(https://fontawesome.com/get-started/web-fonts-with-css),你可以先包含这一重要文件:
<link href="https://use.fontawesome.com/releases/v5.0.2/css/fontawesome.css" rel="stylesheet">
然后,你可以包含一个或一些:
<link href="https://use.fontawesome.com/releases/v5.0.2/css/brands.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/regular.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/solid.css" rel="stylesheet">
这是一个老问题。然而,有一种变通方法。
我会假设你正在使用NPM和的WebPack。 (在我的情况我使用Laravel,其中包括NPM)
打开文件夹node_modules/@fortawesome/fontawesome-free/js
。现在,假设你想只在brands.js使用Facebook图标。
var icons = {...};
部分,其留作参考后者 var icons = {
"facebook-f":[...],
};
Icomoon让你使用自己的独立svgs。
两年过去了,这一问题被提出后,我会建议你使用SVGs而非图标字体。您可以连接所有的SVGs成SVG spritesheet,所以他们都得到使用一个HTTP请求加载(和缓存)。该文件将不是整个图标字体,这是你的要求要小得多。
这里有一些理由来接SVGs在图标字体(也see here):
为了得到高的性能,你需要把你的所有SVG图标在精灵表。为此,您可以使用svgstore(grunt和gulp和webpack版本都可以),这样它的构建过程的一部分。
FontAwesome使得可以作为SVG文件的所有图标,这样你就可以选择你想要的那些,并将它们添加到您的spritesheet的构建。