我使用的是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',看看它是否工作。
其他回答
在Angular 11中
npm install @fortawesome/angular-fontawesome --save
npm install @fortawesome/fontawesome-svg-core --save
npm install @fortawesome/free-solid-svg-icons --save
然后在app。module。ts的imports array中
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
imports: [
BrowserModule,
FontAwesomeModule
],
然后在any.component.ts中
turningGearIcon = faCogs;
然后是any.component。html
<fa-icon [icon]="turningGearIcon"></fa-icon>
公认的答案已经过时了。
棱角分明,棱角分明
安装FontAwesome NPM install @fortawesome/ fontawessome -free——保存 在angular上注册它。样式下的Json “node_modules / @fortawesome / fontawesome-free / css / all.min.css” 在您的应用程序中使用它
编辑:我使用角^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 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!
我想我会抛出我的决议,因为字体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";
希望这能有所帮助