我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
从https://github.com/AngularClass/angular-starter开始,在测试了许多不同的配置组合之后,下面是我如何让它与AoT一起工作的。
我已经说过很多次了,在我的app.component.scss中:
$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";
然后在webpack.config.js中(实际上是启动包中的webpack.comm .js):
在插件部分:
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' },
{ from: 'src/meta'},
{ from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),
在规则部分:
,
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader?name=/assets/fonts/[name].[ext]'
}
其他回答
公认的答案已经过时了。
棱角分明,棱角分明
安装FontAwesome NPM install @fortawesome/ fontawessome -free——保存 在angular上注册它。样式下的Json “node_modules / @fortawesome / fontawesome-free / css / all.min.css” 在您的应用程序中使用它
如果你想使用免费版本的字体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"
]
如果你使用的是SASS,你可以通过npm安装它
npm install font-awesome --save
然后导入到你的/src/styles中。scss:
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";
提示:只要有可能,避免混淆angular-cli的基础设施。;)
Font Awesome为您提供了可伸缩的矢量图标,可以立即自定义大小,颜色,投影,以及任何可以用CSS的力量完成的事情。
创建一个新项目并导航到该项目。
ng new navaApp
cd navaApp
安装font-awesome库并将依赖项添加到package.json。
npm install --save font-awesome
使用CSS
添加CSS图标到你的应用程序…
// in angular.json
"build": {
"options": {
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"src/styles.css"
],
}
}
使用萨斯
使用SASS创建新项目:
ng new cli-app --style=scss
使用现有的项目与CSS:
将src/styles.css重命名为src/styles.scss 改变角度。Json来查找样式。用SCSS代替css:
// in angular.json
"build": {
"options": {
"styles": [
"src/styles.scss"
],
}
}
确保将styles.css更改为styles.scss。
创建一个空文件_variables。src/中的SCSS。
在_variables.scss中添加如下内容:
$fa-font-path : '../node_modules/font-awesome/fonts';
在风格。SCSS添加以下内容:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-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