当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

angular-fontawesome

Official Angular component for Font Awesome 5

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者李华茂

操作系统跨平台

开源组织无

适用人群未知

软件概览

angular-fontawesome

Official Angular component for Font Awesome 5

Installation

Using ng add:

# See Compatibility table below to choose a correct version
$ ng add @fortawesome/angular-fontawesome@<version>

Using Yarn

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ yarn add @fortawesome/angular-fontawesome@<version>

Using NPM

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>

Compatibility table

@fortawesome/angular-fontawesome	Angular	ng-add
0.1.x	5.x	not supported
0.2.x	6.x	not supported
0.3.x	6.x && 7.x	not supported
0.4.x, 0.5.x	8.x	not supported
0.6.x	9.x	supported
0.7.x	10.x	supported
0.8.x	11.x	supported
0.9.x	12.x	supported

Usage

To get up and running using Font Awesome with Angular follow below steps:

Add FontAwesomeModule to imports insrc/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tie the icon to the property in your componentsrc/app/app.component.ts:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

Use the icon in the templatesrc/app/app.component.html:
```
<fa-icon [icon]="faCoffee"></fa-icon>
```

Documentation

Examples

Stackblitz

Here's a StackBlitz Starter Sample on how to display Solid, Regular, and Brand icons using the Icon Library.

Demo application

You can find examples in the projects/demo directory. You can follow the docs to run the demo app on your own machine.

Contributing

angular-fontawesome is a product of the community, you can take a look at the developer docs to find about more on how to contribute back to the project.

Contributors

The following contributors have either helped to start this project, have contributedcode, are actively maintaining it (including documentation), or in other waysbeing awesome contributors to this project. We'd like to take a moment to recognize them.

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

The Font Awesome team:

使用案例

angular使用font-awesome

font-awesome http://www.fontawesome.com.cn/get-started/ 使用 CSS 复制 font-awesome 目录到你的项目中在<head>处加载font-awesome.min.css如下。 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Angular7引入Font Awesome

1.下载包 npm install --save font-awesome angular-font-awesome 2.导入相应的module import { AngularFontAwesomeModule } from 'angular-font-awesome'; @NgModule({ //... imports: [ //... AngularFontAwes
使用angular正确使用fortawesome的方法！

具体参考下面的文章：链接 http://www.php.cn/js-tutorial-394509.html 1 .使用fortawesome的icon库引入方式 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.
怎样在angular7/ionic 4 中使用font awesome图标

安装 npm istall font awesome for angular 仅例举一些免费的图标 npm istall @fortawesome/fontawesome-svg-core npm istall @fortawesome/free-solid-svg-icons npm istall @fortawesome/angular-fontawesome 复制代码用法一 src/app
font-awesome图标转为图片

一、图标的本质 font-awesome图标是字体，专业术语叫 Icon Font，本质上是使用 PUA （ Private Unicode Area ）码位 Unicode 编码的字符，所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的，不一样的无非是编码。二、绘制图片理解了图标的本质，那图标转成文本就有了一个思路，把文本绘制到can
CSS - angular-ui-bootstrap标签库

网址：https://github.com/angular-ui/bootstrap Bootstrap图标库里面分为了三类内容： Font Awesome：Bootstrap专用图标字体，Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。 Simple Icons：收集众多网站的Logo
以 Angular 的姿势打开 Font-Awesome

环境 Angular: v5.2.9 Font-Awesome: v5.0.10 angular-fontawesome: v0.1.0-9 无须再用传统的 Web Font 方式　　以前习惯于 Font-Awesome 的传统方式：页面底部引用一个 font-awesome.min.css 文件，然后在页面中使用 <i class="fa xxx"></i> 放置图标——这在 Angular

angular-fontawesome

angular-fontawesome

Installation

Compatibility table

Usage

Documentation

Examples

Stackblitz

Demo application

Contributing

Contributors

同类工具

相关阅读

相关文章

相关问答

相关文档