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
- If you want to add an icon to particular link label in the Sidenav or Navbar, here's what you have to do.
- Firstly, you have to go to our icons list and choose an icon.
- Click on one you've chosen and copy the
Output HTML, which is next to the icon preview in the top of the website.
- Now, go back to the
Menusclick on the item which you want to have an icon at.
- You will see
Navigation Labelwith 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
- Icons may be used in a various of ways, one of them is to use the MDW Features widget.
- Go to the
- On the left side find
- Now drag and drop it into section Blog/Magazine/Ecommerce section.
- 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
- 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.
- Go to the
Postsand add or edit a post, where you want to insert an icon.
- Click the tab
Textin the right corner of the Post card.
- Go to our page with the list of the icons and find the icon.
- Copy the
Output HTMLand 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".
- 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:
- 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):
- If you want to put the icon in the center of the website, insert your previous code between the
</center>tags like in an example below:
- Don't forget to
Save- if it is a new post, or
Update- if you have added the icon to the already existing post.
In the text it should look like this:
<i class="fa fa-plus" aria-hidden="true"></i>
<i class="fa fa-plus" aria-hidden="true" fa-3x"></i>
<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
<center><i class="fa fa-plus" aria-hidden="true" fa-3x"></i></center>