我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
上面的答案有点过时了,有一种稍微简单的方法。
通过NPM安装 NPM install font-awesome——保存 在你的style.css中: @ import“~ font-awesome / css / font-awesome.css”; 或者用你的风格。 $ fa-font-path:“~ font-awesome /字体”; @ import ' ~ font-awesome / scss / font-awesome '; 编辑:如注释中所述,字体行必须在新版本上更改为$fa-font-path: "../../../node_modules/font-awesome/fonts";
使用~将使sass查找node_module。这样做比相对路径更好。原因是,如果你在npm上上传了一个组件,然后在组件scss中导入了font-awesome,那么它将使用~正常工作,而不是使用相对路径,因为相对路径在那一点上是错误的。
此方法适用于任何包含css的npm模块。它也适用于scss。然而,如果你导入css到你的样式。SCSS是行不通的(也许反之亦然)。原因如下
其他回答
5. For fontawesome;X +最简单的方法是,
使用NPM包安装: NPM install——save @ fortawessome / fontawessome -free
以你的风格。SCSS文件包括:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
注意:如果你有_variables。那么在SCSS文件中包含$fa-font-path更合适,而不是在样式中。scss文件。
在Angular 11中
npm install @fortawesome/angular-fontawesome --save
npm install @fortawesome/fontawesome-svg-core --save
npm install @fortawesome/free-solid-svg-icons --save
然后在app。module。ts的imports array中
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
imports: [
BrowserModule,
FontAwesomeModule
],
然后在any.component.ts中
turningGearIcon = faCogs;
然后是any.component。html
<fa-icon [icon]="turningGearIcon"></fa-icon>
编辑:我使用角^4.0.0和电子^1.4.3
如果你在使用ElectronJS或类似的程序时遇到了问题,并且出现了404错误,一个可能的解决方法是重新编辑你的webpack.config.js,通过添加(并且假设你已经通过npm或包中安装了字体很棒的节点模块)。json文件):
new CopyWebpackPlugin([
{ from: 'node_modules/font-awesome/fonts', to: 'assets' },
{ from: 'src/assets', to: 'assets' }
]),
注意,我使用的webpack配置有src/app/dist作为输出,并且,在dist中,webpack创建了一个资产文件夹:
// our angular app
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/app/app',
},
// Config for our build files
output: {
path: helpers.root('src/app/dist'),
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
所以基本上,目前的情况是:
Webpack正在将字体文件夹复制到开发资产文件夹。 Webpack正在将dev assets文件夹复制到dist assets文件夹
现在,当构建过程完成时,应用程序将需要查找.scss文件和包含图标的文件夹,正确地解析它们。 为了解决这些问题,我在我的webpack配置中使用了这个:
// support for fonts
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},
最后,在.scss文件中,我导入了字体很棒的.scss,并定义了字体的路径,同样是dist/assets/font-awesome/fonts。路径是dist,因为在我的webpack中。配置输出。路径设置为helpers.root('src/app/dist');
在app。scss中
$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
注意,通过这种方式,它将定义字体路径(稍后在.scss文件中使用),并使用~font-awesome导入.scss文件来解析node_modules中的字体-awesome路径。
这是相当棘手的,但这是唯一的方法,我发现绕过404错误问题与电子。js
经过一些实验,我设法得到以下工作:
使用npm安装: NPM install font-awesome——保存 添加到angular-cli-build.js文件: vendorNpmFiles: [ font-awesome / * * / *。+ (css | css.map |传递|测试结束svg | | ttf woff | | woff2)”, ] 添加到index.html <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
关键是在angular-cli-build.js文件中包含字体文件类型
.+(css|css.map|otf|eot|svg|ttf|woff|woff2)
要在你的Angular项目中使用Font Awesome 5,将下面的代码插入到src/index.html文件中。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
好运!