将 font-awesome pro 5 与 ExtJs 7.6.0 集成

Question

ExtJs 7.6.0 附带免费版本的 font-awesome (fa) 5。有人成功将 fa pro 5 与 ExtJs 7.6.0 (经典) 集成吗？

如果是，有什么提示或说明吗？

我从here找到了这些说明，但它们适用于将 fa 5 集成到默认使用 fa 4.7 的 ExtJs 6.6.0 中。

蒂亚

Answer 1

我已成功将

Font Awesome Pro 5 and 6

整合到

Ext JS versions 6 and 7 (classic)

中。我使用了几个指南，包括您链接的指南，上次我什至从 Sencha 支持那里获得了升级说明文档。

我可以告诉你，这不是一件容易的事情，因为 Ext JS 和 Font Awesome 都在不断变化，每个指南都有些过时了，甚至我从 Sencha 支持处获得的文档也不完整。需要进行许多手动调整才能使其正常工作。

所以我可以分享我上次遵循的步骤（

Font Awesome Pro 6 - Ext JS 7.6

），但很可能您需要额外的步骤才能使其正常工作。所有路径都相对于项目的根文件夹。

备份现有 FA (
```
ext/packages/font-awesome
```
)。
获取您想要的 FA Pro（网络）版本（您需要订阅 Pro 版本），并将其解压缩到
```
ext/packages/font-awesome/resources
```
。
从上一步文件夹下的
```
webfonts
```
目录中，将文件复制到
```
ext/packages/font-awesome/resources/fonts
```
。
检查
```
scss
```
文件夹中下载的FA包的内容。您必须将这些文件复制到
```
ext/packages/font-awesome/sass/etc
```
下，但根据版本的不同，您可能需要重命名某些文件。例如，在最新的 FA Pro 中，它是
```
regular.scss
```
等，但在
```
ext/packages/font-awesome/sass/etc
```
中，您需要有
```
fa-regular.scss
```
。

应在

ext/packages/font-awesome/sass/etc

中执行以下步骤。老实说，我不知道是否所有这些都是必要的，您可以尝试不使用这些或在每一步之后看看效果如何。

您始终必须执行

sencha app build development

来测试它并在每次更改后重复它。

在

_core.scss

中将

font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');

更改为

font-family: var(--#{$fa-css-prefix}-style-family, "#{$fa-style-family}");

。

如果您需要双色调图标，请清除
```
_duotone-icons.scss
```
的内容并添加以下内容：

@each $name, $icon in $fa-icons {
  .#{$prefix}fad.#{$fa-css-prefix}-#{$name}::after,
  .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
    content: unquote('"\#{$icon}\#{$icon}"') !important;
  }
}

我对此步骤不太确定，也许您可以将其省略，仅在没有它无法工作时才执行。在
```
_functions.scss
```
、
```
_icons.scss
```
、
```
_mixins.scss
```
和
```
_shims.scss
```
中，有这样的行：
```
@return unquote("\"#{ $fa-var }\"");
```
。在我当前的代码中，所有这些都被转换为：
```
@return unquote('"\#{ $fa-var }"');
```
。（
```
$fa-var
```
部分有所不同，尤其是
```
_shims.scss
```
）。
我在使用
```
fa-divide
```
中的
```
_functions.scss
```
功能时遇到了一些问题。这里的代码导致了堆栈溢出错误。我实际上向 Font Awesome 提交了一份错误报告，但我不知道它是否已修复。我最终摆脱了
```
fa-divide
```
功能。这包括以下步骤：

在

_variables.scss

中，将对

fa-divide

的每次调用更改为固定值，例如：

```
fa-divide(20em, 16)
```
至
```
1.25em
```
```
$fa-li-width * fa-divide(5, 4)
```
至
```
2em
```

从所有
```
@import 'functions';
```
文件中删除
```
scss
```
。

将此添加到
```
_variables.scss
```
（这也是因为上一步的原因，因为它最初位于我决定删除的
```
_functions.scss
```
文件中）：

@function fa-content($fa-var) {
  @return unquote("#{ $fa-var }");
}

您可能会遇到已安装的 FA 中不再存在的旧图标名称的问题，但您的 Ext JS 代码使用它们。如果您发现类似的内容，您可以在结尾处添加定义 if
```
_variables.scss
```
，在结束
```
);
```
之外：

$fa-var-automobile: $fa-var-car;

如果您在构建过程中遇到导入问题，请检查
```
@import
```
文件中的
```
scss
```
行，您可能需要添加前导下划线，例如
```
@import '_variables';
```
而不是
```
@import 'variables';
```
。
最后，检查您想要使用的每个字体变体
```
scss
```
文件（
```
fa-solid.scss
```
等），并进行以下调整：

将

content: unquote("\"#{ $icon }\"");

替换为

content: unquote('"\#{ $icon }"');

覆盖适当的

font-family

，例如在

fa-light.scss

中从

Font Awesome 6 Pro

到

Font Awesome 6 Pro Light

，在

fa-solid.scss

中从

Font Awesome 6 Pro

到

Font Awesome 6 Pro Solid

等

准备好后，执行

sencha app build development

来尝试一下。

您应该能够在 Ext JS 代码中使用图标变体，例如：

x-fa fa-user
x-fal fa-user
x-fas fa-user
x-fat fa-user
x-fab fa-google

请告诉我您的效果如何。

Answer 2

你的帖子对我帮助很大，谢谢。我刚刚成功将 FA Pro 6.5.1 集成到 Extjs 7.7 中，但我必须做一些额外的工作...

第1步：在 _core.scss fas、far、fal 和 fat 中指向相同的字体系列。我改变了：

.fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.fal,
.#{$fa-css-prefix}-light,
.fat,
.#{$fa-css-prefix}-thin {
  font-family: 'Font Awesome 6 Pro';
}

进入

.fa, .x-fa, .x-far, .far,
.#{$fa-css-prefix}-regular {
    font-family: 'Font Awesome 6 Pro Regular';
}
.x-fas, .fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid {
    font-family: 'Font Awesome 6 Pro Solid';
}
.fal,
.#{$fa-css-prefix}-light {
    font-family: 'Font Awesome 6 Pro Light';
}
.fat,
.#{$fa-css-prefix}-thin {
    font-family: 'Font Awesome 6 Pro Thin';
}

需要进行此更改才能使用不同的前缀。

第2步：运行我的应用程序后，我注意到只能使用纯色和常规字体。在 ext\packages ont-awesome\sass\src 中，我更新了文件 all.scss。 该文件用于构建最终的 *.scss 文件。因此，我添加了我的应用程序所需的所需缺失字体：

@import "../etc/fa-solid.scss";  
@import "../etc/fa-light.scss";  
@import "../etc/fa-thin.scss";  
@import "../etc/fa-duotone.scss";

运行sencha app builddevelopment（我主要使用sencha app build -cdevelopment来清除当前文件）所有需要的字体都可以使用。

我希望这有帮助。

将 font-awesome pro 5 与 ExtJs 7.6.0 集成

问题描述投票：0回答：2

2个回答

最新问题

将 font-awesome pro 5 与 ExtJs 7.6.0 集成

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2