我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
编辑:我使用角^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
其他回答
对于Angular 6,
第一个npm安装font-awesome——保存
将node_modules/font-awesome/css/font-awesome.css添加到angular.json中。
记住不要在node_modules/前面添加任何点。
这里有很多好的答案。但如果你尝试了所有这些,仍然得到方形而不是方正的图标,检查你的css规则。在我的例子中,我有以下规则:
* {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
它覆盖了一些字体。只是将* selector替换为body解决了我的问题:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
你可以使用Angular Font Awesome包
NPM install——save angle -font-awesome
然后在你的模块中导入:
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
并导入angular-cli文件中的样式:
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
在NPM库中查看更多关于包的详细信息:
https://www.npmjs.com/package/angular-font-awesome
然后像这样使用它:
<i class=“fa fa-coffee”></i>
要在你的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">
好运!
如果你想使用免费版本的字体awesome - bootstrap,使用这个:
npm install --save @fortawesome/fontawesome-free
如果你正在构建angular项目,你还需要在你的angular中添加这些导入。json:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/@fortawesome/fontawesome-free/js/all.js"
]