@fortawesome/fontawesome-free

Basic Icon Usage

This feature allows you to easily include Font Awesome icons in your HTML by using the appropriate class names. The example shows how to include a camera icon.

<i class="fas fa-camera"></i>

Icon Styling

You can style Font Awesome icons using CSS. The example demonstrates how to change the color and size of the camera icon.

<i class="fas fa-camera" style="color: red; font-size: 24px;"></i>

Using Icons with React

Font Awesome provides a React component for easier integration with React applications. The example shows how to use the FontAwesomeIcon component to include a camera icon in a React component.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCamera } from '@fortawesome/free-solid-svg-icons';

function App() {
  return <FontAwesomeIcon icon={faCamera} />;
}

Using Icons with Angular

Font Awesome also provides support for Angular applications. The example shows how to set up and use Font Awesome icons in an Angular component.

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faCamera } from '@fortawesome/free-solid-svg-icons';

library.add(faCamera);

@NgModule({
  imports: [
    FontAwesomeModule
  ]
})
export class AppModule { }

@Component({
  selector: 'app-root',
  template: '<fa-icon [icon]="'camera'"></fa-icon>'
})
export class AppComponent { }