Tag: tutorials

We are going to use a few icons from FontAwesome. With a little bit of extra work we can import only the icons we need, instead of the entire library (10x faster according to FortAwesome), We are aiming to make a theme with 95%-100% rating for page speed, so this extra work is essential to this aim.

I plan on using some social media icons and a search bar in the nav menu we have just created, so before we move onto that let’s spend some time learning how to correctly import these icons. From our terminal window, run this command :

yarn add @fortawesome/fontawesome-svg-core

We will need to now add the individual font libraries that we will be picking font from, for me they will be the most common 2 :

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Next, we need to choose the individual icons that we will be loading, to do this, we will be exploring the resources/assets/scripts/main.js file, add the following :

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faFacebook, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { faSearch } from '@fortawesome/free-solid-svg-icons';
library.add(faFacebook, faTwitter, faSearch);

dom.watch();

To import new icons to use, we will need to come back to this file and add it to the icon name object and library.add

If you are following along with this series, lets make sure everything is working and replace the header.blade.php file with the following :

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'your-theme-slug'); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>
   <!-- <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a> -->

   @if (has_nav_menu('primary_navigation'))
  {!! wp_nav_menu(['theme_location' => 'primary_navigation',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker()]) !!}
@endif


    <form class="d-flex input-group w-auto">
      <input
        type="search"
        class="form-control rounded"
        placeholder="Search"
        aria-label="Search"
        aria-describedby="search-menu"
      />
      <span class="input-group-text text-white" >
        <i class="fas fa-search"></i>
      </span>
    </form>

    </div>

</nav>

We should now see the search icon image next to a search box. We will be modifying this search box shortly, and changing the header significantly in the next tutorial.