Fatal编程技术网
  • javascript/
  • Javascript 在angular cli 8中为angular 7设置字体awesome 5

Javascript 在angular cli 8中为angular 7设置字体awesome 5

javascript angular

Javascript 在angular cli 8中为angular 7设置字体awesome 5,javascript,angular,Javascript,Angular,我想通过将字体复制到project（不从internet链接字体）并直接使用任何外部插件/项目，将fontawesome 5添加到angular cli 8.0.2项目（使用SCS）中 所以我创建项目并安装fontawesome（免费），如下所示 ng n --style=scss --routing=true myproject cd myproject npm install --save-dev @fortawesome/fontawesome-free 我修改文件： 在angular

我想通过将字体复制到project（不从internet链接字体）并直接使用任何外部插件/项目，将fontawesome 5添加到angular cli 8.0.2项目（使用SCS）中

所以我创建项目并安装fontawesome（免费），如下所示

ng n --style=scss --routing=true myproject
cd myproject
npm install --save-dev @fortawesome/fontawesome-free
我修改文件：

  • 在
    angular.json
    的key
    projects.myproject.architect.build.options.styles中，我向数组添加以下值
    

    ”/node_modules/@fortawesome/fontawesome free/scss/fontawesome.scss“
  • 在
    styles.scss
    I中添加行：

    @import./node_modules/@fortwome/fontwome free/scss/fontwome.scss”
  • 在
    src/app/app.component.html
    Wellcome
    文本后添加
然后，我运行命令
ng serve
，并在浏览器中转到
http://localhost:4200/
，请参见以下内容：

我使用了来自互联网的不同指令，但这是我得到的最佳结果——但仍然不起作用（我们看到的是正方形）如何解决此问题？

编辑：图标不显示的原因是您没有指定图标样式的类型。您可以找到受支持的图标样式列表（或在下面列出）：

  • brands.scss
  • solid.scss
  • regular.scss
  • light.scss
原始答案 FontAwesome包含在其NPM包中的SCSS文件并没有为您进行自我设置：您应该自己导入各个SCSS文件。（有关更多信息，请参阅）

相反，您应该包含已经编译的CSS，这样就不必手动导入SCSS文件。（运行下面的命令以设置样式）

（或手动将“
”/node_modules/@fortawesome/fontawesome free/css/all.css”
添加到项目的样式中）

有关FontAwesome软件包中包含的内容的更多信息，请参阅。

编辑：图标不显示的原因是您没有指定图标样式的类型。您可以找到受支持的图标样式列表（或在下面列出）：

  • brands.scss
  • solid.scss
  • regular.scss
  • light.scss
原始答案 FontAwesome包含在其NPM包中的SCSS文件并没有为您进行自我设置：您应该自己导入各个SCSS文件。（有关更多信息，请参阅）

相反，您应该包含已经编译的CSS，这样就不必手动导入SCSS文件。（运行下面的命令以设置样式）

（或手动将“
”/node_modules/@fortawesome/fontawesome free/css/all.css”
添加到项目的样式中）

有关FontAwesome软件包中包含的内容的更多信息，请参阅。

Font Awesome现在提供的，但您也可以使用以下简单方法：

npm install --save @fortawesome/fontawesome-free
只需将以下内容添加到
样式中即可加载字体图标。scss
：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
在Angular
v8.2.14
和Angular CLI
v8.3.19

上进行了测试，Awesome现在提供了，但您也可以使用以下简单方法：

npm install --save @fortawesome/fontawesome-free
只需将以下内容添加到
样式中即可加载字体图标。scss
：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
在Angular
v8.2.14
和Angular CLI
v8.3.19

上测试，您为什么要导入同一个SCSS文件两次？当我没有更改
样式时。SCSS
将不可见“方形图标”如何尝试在
样式.SCSS
文件中删除导入，而是从中导入
所有.css
文件
node_modules/@fortawesome/fontawesome free/css/all.css
转换为
angular.json
？很可能它不起作用，因为fa.scss中指定的路径不适合您的项目，这意味着浏览器在此处找不到字体，因此只能渲染正方形。但要验证这一点，您必须使用开发工具进行调试，并查看加载了哪个字体文件（通过查看开发工具中的“网络”选项卡）你为什么要两次导入同一个SCSS文件？如果我不更改
样式.SCSS
，那么“方形图标”将不可见，那么尝试删除
样式.SCSS
文件中的导入，而将
所有.css
文件从
节点模块/@fortawesome/fontawesome free/css/all.css
导入到
angular.json
？很可能它不起作用，因为fa.scss中指定的路径对于您的项目不正确，这意味着浏览器在此位置找不到字体，因此只能渲染正方形。但要验证这一点，您必须使用开发人员工具进行调试，并查看加载了哪个字体文件（通过查看开发工具中的“网络”选项卡），我只将styles.css中的导入更改为
@import”。/node_modules/@fortawesome/fontawesome free/css/all.css”并且它可以工作：）-谢谢，我只把styles.css中的导入改为
@import./node_modules/@fortwawesome/fontwesome free/css/all.css”并且它可以工作：）-谢谢