仅包含部分字体真棒

问题描述 投票:4回答:6

我需要的字体真棒有微调的图标。

我可以包括整个字体真棒库。但是,那不是只是一个图标的矫枉过正?有没有一种方法,只包含一个图标或组件?这个问题似乎是,该库是不是模块化的,以不同的文件。例如,如果使用SCSS,所有图标都在_icons.scss文件,而不是在自己的文件中的每个图标。如果使用纯CSS,那么一切都在一个文件中。

css font-awesome
6个回答
3
投票

你不能。一种字体是一个单一的文件,很象的图像或文档。不要紧,你如何将其包含在你的CSS - 用户仍然会下载整个字体文件。 CSS定义只是让你的网站上提供的字体。

有一些东西,你可以做作为替代。还有一些公司,将允许您生成使用自定义应用程序(如https://icomoon.io/,例如)的部分字体集。这可能会满足您的需求。但是,一旦你创建自己的字体的定制版本,它仍然是你不能分手的文件。尽管如此,icomoon的定制版本可以非常小,精简和可能会适合你描述的场景。

另一种方法是不要自己主办的字体,但使用基于云的字体,更容易被用户缓存。这本身并不是一个解决方案,但会增加成功的机会有所您的用户就不必专门下载字体为您的网站。


1
投票

字体真棒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">

1
投票

1
投票

这是一个老问题。然而,有一种变通方法。

我会假设你正在使用NPM和的WebPack。 (在我的情况我使用Laravel,其中包括NPM)

打开文件夹node_modules/@fortawesome/fontawesome-free/js。现在,假设你想只在brands.js使用Facebook图标。

  1. 复制brands.js和过去,它在同一文件夹中的另一个名字-say“brands_used.js'-
  2. 开放brands_used.js和评论的var icons = {...};部分,其留作参考后者
  3. 输入与您只需要包含的图标,这将是从注释部分复制/过去的一个新的变量。
    var icons = {
      "facebook-f":[...],
    };
  1. 需要在你的JS资产文件夹中的新创建的文件
  2. 编译你的资产

0
投票

Icomoon让你使用自己的独立svgs。

https://github.com/Keyamoon/IcoMoon-Free/tree/master/SVG


0
投票

两年过去了,这一问题被提出后,我会建议你使用SVGs而非图标字体。您可以连接所有的SVGs成SVG spritesheet,所以他们都得到使用一个HTTP请求加载(和缓存)。该文件将不是整个图标字体,这是你的要求要小得多。

这里有一些理由来接SVGs在图标字体(也see here):

  • 你只包括您想要的图标,很明显。
  • SVG图标允许您创建五彩的图标。
  • 浏览器的图标字体抗锯齿。 SVGs都没有,所以他们看起来更清晰。
  • 字体图标是很难定位。 SVGs容易。
  • SVG图标可以纷纷出炉,在标题和描述,这是很好的可访问性。

为了得到高的性能,你需要把你的所有SVG图标在精灵表。为此,您可以使用svgstoregruntgulpwebpack版本都可以),这样它的构建过程的一部分。

FontAwesome使得可以作为SVG文件的所有图标,这样你就可以选择你想要的那些,并将它们添加到您的spritesheet的构建。

© www.soinside.com 2019 - 2024. All rights reserved.