我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
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文件。
其他回答
我想使用字体Awesome 5+和大多数答案集中在旧版本
对于新的Font Awesome 5+, angular项目还没有发布,所以如果你想使用Font Awesome网站atm上提到的例子,你需要使用一个变通方法。(尤其是fas, far类而不是fa类)
我刚刚在我的styles.css中导入了cdn到Font Awesome 5。只是添加了这个,以防它能帮助别人比我更快地找到答案:-)
样式代码。css
@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
经过一些实验,我设法得到以下工作:
使用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)
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文件。
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';
如果你使用的是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的基础设施。;)