Using Node.js
If you're using Node.js, the
@fortawesome/fontawesome-svg-core NPM package exports methods that can be used to perform various tasks.Start by installing the Font Awesome SVG Core package:
npm install @fortawesome/fontawesome-svg-coreThen you can tap into the API from within your app or project:
import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faCamera } from '@fortawesome/free-solid-svg-icons'
library.add(faCamera)
const camera = icon({ prefix: 'fas', iconName: 'camera' })Accessing the configuration
When using the @fortawesome/fontawesome-svg-core package:
import { config } from '@fortawesome/fontawesome-svg-core'
console.log(config.autoA11y) // trueWhen using a package that provides access to the API through the browser:
<script>alert(window.FontAwesome.config)</script>Using a
<script> tag in the browser:<html>
<head>
<script src="https://your-site-or-cdn.com/fontawesome/v6.0.0/js/all.js" data-auto-a11y="true" ></script>
</head>
<body></body>
</html>Referencing Icons
We recommend referencing icons in your HTML with a dedicated element you'll use only for icons. We find the <i> tag perfect for the job. That element will contain: 1) Font Awesome specific style prefix (e.g. fa-solid), and 2) the icon's name (prefixed with fa-) you want to display.
<i class="fa-solid fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="fa-regular fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fa-light fa-question-circle"></i> <!-- light style of the question circle icon -->
<i class="fa-brands fa-facebook"></i> <!-- facebook brand icon-->
<i class="fa-brands fa-facebook-f"></i> <!-- facebook "f" brand icon-->
0 Comments