Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where do I find the object names of icons in the FontAwesome free packages?

FontAwesome is a collection of libraries of icons. In their Usage documentation, they write as an example that you can use their coffee icon by importing the coffee icon's object from the free-solid-svg-icons package, like this:

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 
const element = <FontAwesomeIcon icon={faCoffee} />
 
ReactDOM.render(element, document.body)

Looking at the FontAwesome Coffee Icon documentation, I can see no reference to what package the coffee icon is included in, or what its object name is. We know from the example code that its object name is faCoffee and that it's included in the @fortawesome/free-solid-svg-icons package, but what about any of the other 5,365 icons?

Q: How can I find what React object name a FontAwesome icon has, and what React package it's included in?

like image 856
Mossmyr Avatar asked Jun 12 '19 10:06

Mossmyr


People also ask

What is fontawesome 5 package?

Fontawesome Package The fontawesome package enables easy access to more than 1500 high-quality icons in LaTeX. These icons are covering many examples such as: animals, buildings, alerts, computers, brands, arrows, currency, date & time and much more! In this post we will consider fontawesome 5 package (version 5.13.0, 2020/03/24).

How do I use fontawesome's coffee icon?

FontAwesome is a collection of libraries of icons. In their Usage documentation, they write as an example that you can use their coffee icon by importing the coffee icon's object from the free-solid-svg-icons package, like this:

How many icons are there in Font Awesome?

The complete set of 675 icons in Font Awesome 4.7.0 You asked, Font Awesome delivers with 41 shiny new icons in version 4.7. Want to request new icons? Here's how .

How to insert icons in LaTeX using Font Awesome?

The following code shows how one can insert icons in LaTeX using the Font Awesome package: An icon is inserted by using the command \faIcon {the-icon-name}. The icon name corresponds to the official icon name, which most of the time can be obtained from Fontawesome.com.


1 Answers

There are only 4 packages in Font-Awesome:

Name    | Free | Paid | Prefix | NPM Package (free)                  | NPM package (paid)
---------------------------------------------------------------------------------------------------------
Solid   | Yes  | Yes  | fas    | @fortawesome/free-solid-svg-icons   | @fortawesome/pro-solid-svg-icons
Regular | Yes  | Yes  | far    | @fortawesome/free-regular-svg-icons | @fortawesome/pro-regular-svg-icons
Light   | No   | Yes  | fal    |                                     | @fortawesome/pro-light-svg-icons
Brands  | Yes  | No   | fab    | @fortawesome/free-brands-svg-icons  | 

On the Search icons page you can filter them by package so you know what icons belongs to what package; As an example the following link gives icons filtered by Solid package.

That being said, from the code you posted you can deduct the React name of the icon adding the prefix "fa" from the icon list; the icon "Coffee" in React is "faCoffee".

And from the filtered link you should be able to find what icons belongs to what package.

like image 148
Kaiser Avatar answered Sep 20 '22 08:09

Kaiser