Home Forums Porto Template icons

This topic contains 6 replies, has 2 voices, and was last updated by  zerotechz 1 month, 1 week ago. This post has been viewed 113 times

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #10029874

    zerotechz
    Participant

    I’ve decided to use a side header for navigation of a website I’m building using porto and wanting to place icons next to page links there. I’ve added an icon but the icon isn’t spaced well from the link. The icon crowds the link..Any code I can use to space the icon in a side header navigation menu ?


    #10029885

    Support2
    Keymaster

    Hello,

    Here is the code you need to add icon next the menu items text on side headers:

    .....
    ....
    ...
    <li class="dropdown dropdown-mega">
    	<a class="dropdown-item dropdown-toggle" href="elements.html">
    		Elements
    		<i class="fas fa-check ml-2"></i>
    	</a>
    ....
    ....
    ...

    * Note that the icon should be added inside the <a>.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 month, 1 week ago by  Support2.
    #10029906

    zerotechz
    Participant

    I’ve actually got the icon added in but the issue is the icons have no spacing between them and the nav link in sidebar header.


    #10029908

    Support2
    Keymaster

    Hello,

    Please can you send an online test link showing the issue for us, so we can inspect your code and help you with this.

    Our last solution for your is generating a spacing between the text and the icon. Maybe you mean another way to show the icon.

    * The spacing is generated by the class ml-2.

    Kind Regards,

    Rodrigo.


    #10029916

    zerotechz
    Participant

    unfortunately the site is local as of now and not online yet…However the image you have posted with the checkmark and the spacing is exactly what I’m seeing when I place the icon after the “element” link..At that point the spacing is fine. What I’d like to do if possible is place the icon before the link. When I place it before the link the spacing is gone


    #10029918

    Support2
    Keymaster

    Hello,

    Thanks for the explanation.

    To add before the menu item text and with a small space you need this code:

    .....
    ....
    ...
    <li class="dropdown dropdown-mega">
    	<a class="dropdown-item dropdown-toggle" href="elements.html">
    		<i class="fas fa-check mr-2"></i>
                    Elements
    	</a>
    ....
    ....
    ...

    * Note that we just put the icon before the text on the source code. The class mr-2 generates the space. The possible class values starts from mr-1 until mr-5.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029922

    zerotechz
    Participant

    awesome and thank you for the code..It worked perfect


Viewing 7 posts - 1 through 7 (of 7 total)