Adding logo images to the navbar and footer

Let's start by placing the markup for our logo image within the navbar-brand link. We'll find the markup for this in the header-top-navbar.php file in the templates folder:

1. Open the header-top-navbar.php file inside the templates folder in your editor.

2. Find the following element:

   <a class="navbar-brand" ...

3. Delete the following tag, which places our site name within the navbar brand link:

   <?php bloginfo('name'); ?>

4. Replace the previous line of code with the appropriate tag for our logo image:

   <img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" width="120" alt="Bootstrappin'">

   Tip

   Remember that the logo image is built large so that it appears crisp in a retina display. So, be sure to include the width attribute. Otherwise, it will appear much too large.

5. Save your results.

6. If you refresh your page, you should see the logo image appear as shown in the following screenshot:

   

Now for the footer.

Our social icons should...