Bubsites

Font Awesome: Notes

Enqueue Font Awesome Using WordPress

add_action( 'wp_enqueue_scripts', 'bubdev_add_font_awesome' );
/**
 * Add Font Awesome Icon Font
 */
function bubdev_add_font_awesome() {

  // wp_enqueue_style( 'bub-font-awesome-all', BBE_URL . 
    // '/fonts/font-awesome/css/all.css', array(), '230331' );

  wp_enqueue_style( 'bub-font-awesome-main', BBE_URL . 
    '/fonts/font-awesome/css/fontawesome.min.css', array(), '230331' );

  wp_enqueue_style( 'bub-font-awesome-regular', BBE_URL . 
    '/fonts/font-awesome/css/regular.min.css', array(), '230331' );

  wp_enqueue_style( 'bub-font-awesome-sharp-regular', BBE_URL . 
    '/fonts/font-awesome/css/sharp-regular.min.css', array(), '230331' );

  // wp_enqueue_style( 'bub-font-awesome-solid', BBE_URL . 
    // '/fonts/font-awesome/css/solid.min.css', array(), '230331' );

  wp_enqueue_style( 'bub-font-awesome-brands', BBE_URL . 
    '/fonts/font-awesome/css/brands.min.css', array(), '230331' );
}

Add Font Awesome via CSS

Use CSS font-face:

/* Font Awesome */

@font-face {
  font-family: 'Font Awesome Brands';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/font-awesome/fa-brands-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Duotone';
  font-display: block;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/font-awesome/fa-duotone-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Light';
  font-display: block;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/font-awesome/fa-light-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Regular';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/font-awesome/fa-regular-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Sharp Light';
  font-display: block;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/font-awesome/fa-sharp-light-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Sharp Regular';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/font-awesome/fa-sharp-regular-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Sharp Solid';
  font-display: block;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/font-awesome/fa-sharp-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Solid';
  font-display: block;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/font-awesome/fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome Thin';
  font-display: block;
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/font-awesome/fa-thin-100.woff2') format('woff2');
}

Set CSS variables manually (already included in Font Awesome CSS files):

--fa-font-brands: normal normal 400 1em/1 'Font Awesome Brands'; 
--fa-font-duotone: normal normal 900 1em/1 'Font Awesome Duotone'; 
--fa-font-light: normal normal 300 1em/1 'Font Awesome Light'; 
--fa-font-regular: normal normal 400 1em/1 'Font Awesome Regular';
--fa-font-sharp-light: normal normal 300 1em/1 'Font Awesome Sharp Light';
--fa-font-sharp-regular: normal normal 400 1em/1 'Font Awesome Sharp Regular';
--fa-font-sharp-solid: normal normal 900 1em/1 'Font Awesome Sharp Solid';
--fa-font-solid: normal normal 900 1em/1 'Font Awesome Solid';
--fa-font-thin: normal normal 100 1em/1 'Font Awesome Thin';

Use Font Awesome via CSS Pseudo Elements

.icon::before {
  display: inline-block;
  font: var(--fa-font-solid);
  font-size: 1rem;
  margin-right: 0.5em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon--dashboard::before {
  content: '\f624';
}

Learn more: https://fontawesome.com/docs/web/add-icons/pseudo-elements

Zeige alle ...