Adding new icon library to subtheme

Last updated on
25 May 2020

Credit: gaspounet

In YOURTHEME.libraries.yml, add these lines :

fontawesome_5:
  version: VERSION
  css:
    component:
      //use.fontawesome.com/releases/v5.1.0/css/all.css: {}

In YOURTHEME.theme, modify or add these lines :

function YOURTHEME_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
  $form['components']['navbar']['bootstrap_barrio_navbar_top_background']['#options'] = array(
      'bg-primary' => t('Primary'),
      'bg-secondary' => t('Secondary'),
      'bg-light' => t('Light'),
      'bg-dark' => t('Dark'),
      'bg-white' => t('White'),
      'bg-transparent' => t('Transparent'),
  );
  $form['components']['navbar']['bootstrap_barrio_navbar_background']['#options'] = array(
      'bg-primary' => t('Primary'),
      'bg-secondary' => t('Secondary'),
      'bg-light' => t('Light'),
      'bg-dark' => t('Dark'),
      'bg-white' => t('White'),
      'bg-transparent' => t('Transparent'),
  );
  
  $form['fonts']['icons']['bootstrap_barrio_icons']['#options']['fontawesome_5'] = 'Font Awesome 5';
  
}

function YOURTHEME_preprocess_page(&$variables)
{
  $icons = theme_get_setting('bootstrap_barrio_icons');
  if ($icons) {
    $variables['#attached']['library'][] = ( $icons == 'fontawesome_5' ? 'YOURTHEME' : 'bootstrap_barrio' ) . '/' . $icons;
  }
}

"Font Awesome 5" will now appear in your theme settings

Help improve this page

Page status: No known problems

You can: