Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Chapter IV – Icons


Written by Michał Krawczyk ,


Icons are very flexible not only in terms of the shape and size. You may insert them in a variety of places including posts, pages, Navbar and Sidenav labels and widgets as well.



Icons in navigation


  1. If you want to add an icon to particular link label in the Sidenav or Navbar, here's what you have to do.
  2. Firstly, you have to go to our icons list and choose an icon.
  3. Click on one you've chosen and copy the Output HTML, which is next to the icon preview in the top of the website.
  4. Now, go back to the Menus click on the item which you want to have an icon at.
  5. You will see Navigation Label with the name of the item. Put output HTML before the name of link label. Repeat this procedure for every item in the Sidenav or Navbar.


Icons in MDW Feature widget


  1. Icons may be used in a various of ways, one of them is to use the MDW Features widget.
  2. Go to the Appearance and then Widgets.
  3. On the left side find MDW Features label.
  4. Now drag and drop it into section Blog/Magazine/Ecommerce section.
  5. There are four versions you can choose. Two of them contain an option to insert an additional photo. The last one is different from the others - the number of the features is fixed, there is no more, no less than six. Choose one template and add it to the particular page (or all of them) in the Page to display widget. Remember to define whether you want to have the layout of the Features Boxed (width of this section will be the same, no matter how big the screens of your web visitors are) or Full width (section can be stretched infinitely).


Icons in the Text


  1. To add an icon in the text, you need to use an HTML code. Don't worry, it's very simple, just follow the steps.
  2. Go to the Posts and add or edit a post, where you want to insert an icon.
  3. Click the tab Text in the right corner of the Post card.
  4. Go to our page with the list of the icons and find the icon.
  5. Copy the Output HTML and paste it into the Post Text area. Code of the icon you've chosen is very similar to one below. The only difference is the name of the icon. In this particular example, it is "fa-plus".
  6. In the text it should look like this:

    <i class="fa fa-plus" aria-hidden="true"></i>
  7. To change the size, you have to insert proper class inside the code. I want to get it bigger. Therefore, I will use fa-3x class. Now, the icon is bigger:
  8. <i class="fa fa-plus" aria-hidden="true" fa-3x"></i>
  9. Choose the size you prefer - replace the "fa-3x" class with the following classes to change the relative size of the icons (icons are responsive, so their size depends on the size of the container):

  10. fa-lg

    fa-2x

    fa-3x

    fa-4x

    fa-5x

    <i class="fa fa-plus fa-lg"></i> fa-lg
    <i class="fa fa-plus fa-2x"></i> fa-2x
    <i class="fa fa-plus fa-3x"></i> fa-3x
    <i class="fa fa-plus fa-4x"></i> fa-4x
    <i class="fa fa-plus fa-5x"></i> fa-5x
    
  11. If you want to put the icon in the center of the website, insert your previous code between the <center> and </center> tags like in an example below:
  12. <center><i class="fa fa-plus" aria-hidden="true" fa-3x"></i></center>


  13. Don't forget to Save - if it is a new post, or Update - if you have added the icon to the already existing post.


Do you want to share?


About author


Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research and Consulting background, former student of Interfaculty Individual Studies in the humanities at the best university in Poland

Leave a reply

Card image cap

Stay up to date


Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.