DOCSEARCHbyAlgolia
Submit Docs

Font Awesome Docs

website·Indexed 6 days ago

https://docs.fontawesome.com/

Official documentation for Font Awesome, including guides for version 7 and version 6. Covers installation and integration for web projects (React, Vue, Angular, WordPress, Python/Django), desktop environments, and AI agent tools. Includes detailed instructions on adding icons via Kits, SVG packages, and CSS pseudo-elements, as well as styling, animation, accessibility, and upgrade paths from older versions.

Tokens
90.1K
Snippets
436
Records
692
Agent score
99%

What's inside Font Awesome

  2. Overview of Font Awesome styling capabilities

    Font Awesome provides a wide range of styling tools for web icons. Most styling options are available across all implementation methods, but advanced features such as Power Transforms, Masking, Layering, and adding Text/Counters require the SVG + JS implementation method.

  3. Overview of Font Awesome documentation and capabilities

    Font Awesome provides a comprehensive library of icons for web and desktop projects. The documentation covers several key areas: initial setup for new users, styling tools (sizing, rotating, and animating icons), integration into web projects, usage in desktop design software (such as Figma or Illustrator), and the ability to upload custom icons via Kits and the Icon Wizard to be used alongside official icons.

  4. Overview of Font Awesome Subsetting Options

    Subsetting allows you to include only the specific icons needed for a project, reducing the total file size and improving load times. There are four primary ways to achieve this:

    1. Full Library (Kits): No subsetting; includes all icons in all styles. Easiest setup but largest file size.
    2. By Style (Kits): Includes all icons for only the selected styles. A middle-ground option for flexibility and performance.
    3. By Icon (Kits): Hand-pick specific icons. This results in the smallest Kit and fastest load time.
    4. Select Styles (Self-Hosted): Manually download Font Awesome and choose which style files to include in your own environment (Web Fonts or SVGs+JS).

  5. Overview of Font Awesome Kits

    A Font Awesome Kit is a personal CDN used to manage all icons for a specific project. It allows developers to serve only the necessary icons to optimize page load speed, upload custom icons, and choose between different rendering technologies (SVG or Web Fonts). Key features include conflict detection for complex environments and backward compatibility for version upgrades.

  6. Overview of Font Awesome SVG Core Plugins

    The Font Awesome SVG Core library uses a plugin architecture that allows developers to limit file size and improve performance by including only the specific features needed for their project. By default, importing from @fortawesome/fontawesome-svg-core includes all features ('batteries included'), but using the plugin system allows for a more granular selection.

  7. Overview of adding Font Awesome icons to web projects

    Font Awesome provides multiple methods for integrating icons into web projects. While using a 'kit' is the recommended approach for ease of setup and customization, developers can also implement icons using the following specialized methods: CSS Pseudo-Elements, SVG Sprites, SVG Symbols, and bare SVGs.

  8. Overview of the Icon Wizard 2.0

    v2.md
    The Icon Wizard 2.0 is a visual editor that allows users to stack and combine Font Awesome icons into a single custom icon. Each added icon acts as a layer that can be positioned, scaled, rotated, and blended. The tool is available at fontawesome.com/icons/wizard or via the 'Icon Wizard' button on any icon detail page.

  9. Access Font Awesome data via the REST API

    Font Awesome provides a set of REST API endpoints as convenient wrappers around the GraphQL API. These allow developers to retrieve icon and account data without needing to implement GraphQL queries.

  10. Find icons using /suggest-icon

    Use /suggest-icon to search the Font Awesome library for icons matching a specific concept or use case. The tool verifies availability based on your version and license (Free vs Pro) and provides recommendations including icon names and styles.
    /suggest-icon shopping cart

  11. Understand Font Awesome Token types

    Font Awesome provides two types of tokens to allow third-party apps and tools to securely access account data and Pro/Pro+ assets without sharing account credentials:

    1. Package Manager Token: Used specifically to install Font Awesome Pro/Pro+ icons via package managers like npm, yarn, or pip.
    2. API Token: Used to access icons, Kit data, and account information within third-party applications, plugins, and environments.

  12. Choose between Web Fonts and SVG for Font Awesome icons

    Font Awesome provides two primary methods for rendering icons: Web Fonts + CSS and SVG + JS.

    Web Fonts + CSS is a reliable, established technology best for users familiar with older Font Awesome versions or projects where HTML cannot be modified (allowing icons to be added via CSS pseudo-elements like :before). It uses @font-face and references icons by unique unicode values.

    SVG + JS uses vector-based images rendered by the browser engine. It is ideal for JavaScript-based applications and users who need advanced styling capabilities. While it can impact browser performance if too many icons are used on one page, this can be mitigated using SVG symbols for repeating icons.