DOCSEARCHbyAlgolia
Submit Docs

Font Awesome 5 Documentation

website·Indexed 6 days ago

https://docs-v5.fontawesome.com/

Documentation for Font Awesome 5, covering icon styling, animations, and power transforms. Includes guides for Web Fonts + CSS and SVG + JS frameworks, JavaScript API configuration, and integration with Vue, WordPress, and React Native. Provides technical details on icon design guidelines, SVG upload preparation, accessibility, performance, and tree-shaking.

Tokens
90.3K
Snippets
414
Records
621
Agent score
97%

What's inside Font Awesome 5

  1. Retrieve icon metadata using the Font Awesome GraphQL API

    The GraphQL API is the recommended method for programmatically accessing metadata regarding Font Awesome icons and releases. It is specifically suited for developers building plugins or applications that require detailed information about the Font Awesome icon library.

  2. Use SVG JavaScript Core for advanced icon integration

    The fontawesome-svg-core package is designed for specialized use cases where automatic behavior (like automatic <i> to <svg> replacement) is not desired. It is recommended for:

    • Subsetting icons to reduce final bundle size.
    • Building integrations for frameworks like React, Angular, Vue, or Ember.
    • Using with CommonJS/ES6 module bundlers (Webpack, Rollup, Parcel).
    • Using with UMD-style loaders (RequireJS).
    • Server-Side Rendering (SSR) with CommonJS.

    Because it is side-effect free, it supports tree-shaking, allowing compatible tools to remove unused icons from the final build.

  3. Retrieve icon metadata using the Font Awesome GraphQL API

    The GraphQL API is the primary method for programmatically accessing metadata regarding Font Awesome icons and releases. It is recommended for developers building plugins or applications that require detailed icon information.

  4. Debug version conflicts with the Font Awesome Conflict Detection API

    The Conflict Detection API is used to identify and resolve issues in environments where multiple versions of Font Awesome are loading simultaneously (e.g., WordPress), allowing developers to debug and reduce conflicting versions.

  5. Use the Font Awesome JavaScript API for advanced icon rendering

    The Font Awesome JavaScript API is designed for JavaScript-based projects using the SVG+JS rendering method. It provides advanced control over icon rendering, allowing developers to implement tree shaking for icon subsetting, add counters to icon layers, or add text to icon layers.

  6. Use Font Awesome icons in desktop design software

    Font Awesome provides assets for use in desktop design programs such as Figma, Illustrator, and Sketch, as well as for creating documents and slides. Users can integrate icons via two primary methods: using Icon Fonts (ideal for design tools like Figma and Sketch) or using SVG files for more granular control.

  7. Use Font Awesome icons in React Native

    Font Awesome provides an official React Native component for integrating icons into React Native projects. The component is distributed via npm, and the official documentation and API references are hosted on the npm package page.
    npm install @fortawesome/react-native-fontawesome

  8. Use the Font Awesome JavaScript API for advanced SVG rendering

    The Font Awesome JavaScript API is designed for JavaScript-based projects using the SVG+JS rendering method. It provides advanced control over icon rendering, specifically enabling developers to subset icons via tree shaking, add counters to icon layers, and add text to icon layers.

  9. Use Font Awesome icons in React Native

    Font Awesome provides an official React Native component for integrating icons into React Native projects. The component is distributed via npm, and its official documentation and API reference are hosted on the npm package page.
    npm install @fortawesome/react-native-fontawesome

  10. Understand Font Awesome v5 style and weight changes

    Font Awesome v5 introduces multiple styles and weights for icons, whereas v4 was more limited. Icons are now categorized into Solid, Regular, and Brands. Brand icons have been moved into their own dedicated style/category. Additionally, some icon naming conventions have been updated from v4 to v5.
    Icon StyleAvailabilityFont Files in the Download
    SolidFreeFont Awesome 5 Free-Solid-900.otf
    RegularFreeFont Awesome 5 Free-Regular-400.otf
    BrandsFreeFont Awesome 5 Brands-Regular-400.otf
    SolidPro onlyFont Awesome 5 Pro-Solid-900.otf
    RegularPro onlyFont Awesome 5 Pro-Regular-400.otf
    LightPro onlyFont Awesome 5 Pro-Light-300.otf

  11. Use Font Awesome icons in Angular projects

    Font Awesome provides an official Angular component for integrating icons into Angular applications. The component is distributed via npm, and the primary technical documentation and API reference are hosted on the npm package page.
    npm install @fortawesome/angular-fontawesome

  12. Debug version conflicts with the Font Awesome Conflict Detection API

    The Conflict Detection API helps developers identify and reduce conflicts in environments where multiple versions of Font Awesome may be loading simultaneously (e.g., within WordPress). It is primarily used for debugging and optimizing the environment to remove redundant or conflicting versions.