我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
以上工作说明很多,建议大家看一下。不过,有一点需要注意:
在安装后,使用<i class="fas fa-coffee"></i>在我的项目(新实践项目只有一个星期了)中没有工作,这里的示例图标也在过去一周内从Font Awesome复制到剪贴板。
这个<i class="fa fa-coffee"></i>是有效的。如果在你的项目上安装了Font Awesome后,它还不能工作,我建议检查图标上的类,删除's',看看它是否工作。
其他回答
上面的答案有点过时了,有一种稍微简单的方法。
通过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是行不通的(也许反之亦然)。原因如下
对于使用ng的Angular 9:
ng add @fortawesome/angular-fontawesome@0.6.x
更多信息请看这里
我想我会抛出我的决议,因为字体awesome现在安装不同,根据他们的文档。
npm install --save-dev @fortawesome/fontawesome-free
为什么它是fortawesome现在我不知道了,但我想我会坚持使用最新的版本,而不是回到旧的字体-真棒。
然后我把它导入我的scss
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
希望这能有所帮助
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';
你可以使用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>