我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
在Angular 2.0最终版发布之后,Angular2 CLI项目的结构已经改变了——你不需要任何供应商文件,不需要system.js——只需要webpack。所以你会:
npm install font-awesome --save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: "apps": [ { "root": "src", "outDir": "dist", .... "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!? ], ... } ] ], In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css". Place some font-awesome icons in any html file you want: <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i> Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes. Enjoy your awesome icons!
其他回答
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文件。
以上工作说明很多,建议大家看一下。不过,有一点需要注意:
在安装后,使用<i class="fas fa-coffee"></i>在我的项目(新实践项目只有一个星期了)中没有工作,这里的示例图标也在过去一周内从Font Awesome复制到剪贴板。
这个<i class="fa fa-coffee"></i>是有效的。如果在你的项目上安装了Font Awesome后,它还不能工作,我建议检查图标上的类,删除's',看看它是否工作。
webpack2使用:
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
loader: "file-loader"
}
name=/assets/fonts/[name].[ext]
将它添加到您的包中。json作为 “devDependencies” Font-awesome: "版本号"
进入命令提示符,输入您配置的npm命令。
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';