Styling the footer

The biggest feature of the footer is our social icons. Font Awesome to the rescue!

Consulting the Font Awesome documentation, we find a slew of available icons under the category of Brand Icons. Here is the direct link:

http://fortawesome.github.io/Font-Awesome/icons/#brand

Now, we only need to replace the text for each social link in our footer with span elements, using the appropriate classes.

<ul class="social">
  <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
  <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
  <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
  <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
  <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
</ul>

This updated markup puts our icons in place:

Styling the footer

Now, perform the following steps to lay them out horizontally and align them to the center.

  1. Create a new file _footer.less to manage these styles.
  2. Save the file to the less directory.
    Styling the footer
  3. Add an import variable for this file in __main.less.
    // Other custom files
@import "_page-contents.less";
@import "_footer.less";

Now, we'll write the styles we need. Let me simply lay them out, and then list what they do.

The lines that we'll need are given as follows:

ul.social {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  > li {
    display: inline-block;
    > a {
      display: inline-block;
      font-size: 18px;
      line-height: 30px;
      .square(30px); // see bootstrap/mixins.less
      border-radius: 36px;
      background-color: @gray-light;
      color: #fff;
      margin: 0 3px 3px 0;
        &:hover {
        text-decoration: none;
        background-color: @link-hover-color;
        }
    }
  }
}

Here's what's happening:

  • The normal margin and padding is stripped away from the ul
  • It is stretched to a 100 percent width
  • Its content is center aligned
  • The list items are displayed inline block, thereby centering them
  • The links are displayed inline block, so that they fill up their available space
  • The font size and line height are increased
  • The width and height are set to 30px square, using a Bootstrap provided mixin
  • To see this mixin, open bootstrap/mixins.less, search for .square, and you'll find the following relevant lines:
    // Sizing shortcuts
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}
  • The border-radius property is set large enough to make the icons and their backgrounds appear circular
  • The background color, color, and margin properties are set
  • The underline is removed from the hover state, and the background color is altered to a lighter gray

With these steps accomplished, let's polish off the footer by adding a healthy bit of top and bottom padding, and then center aligning the content in order to move our logo to the center above the social icons.

footer[role="contentinfo"] {
  padding-top: 24px`;
  padding-bottom: 36px;
  text-align: center;
}

The result is as follows:

Styling the footer

Not bad—if I don't say so myself!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset