The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

WP SVG Icons
[resolved] Styling UL with SVG Icons (7 posts)

  1. James R
    Posted 2 years ago #

    Hi there,

    Thanks for creating this great plugin, delighted I found it!

    Would you have any examples of how I might add icons to an UL?



  2. Evan Herman
    Plugin Author

    Posted 2 years ago #

    Hey James,

    Glad your finding the plugin helpful! Always a pleasure to hear its helping others.

    Now, when adding the icons to your UL are you using the provided code? Or are you using the example of adding icons to your menu, off the documentation page?

    Is the goal to replace the bullet points, with an icon?

    I haven't had the opportunity to use this technique with this plugin, but following along with this tutorial might give you a great starting point.

    I'll have to look into this, and write a tutorial on the documentation page.

  3. James R
    Posted 2 years ago #

    Thanks for the fast reply Evan, yes the plan is to replace bullets for icons. I couldn't see any code that detailed how to achieve this. I will have a quick look at the menu documentation and see if I can get that to work on an ul.

  4. James R
    Posted 2 years ago #

    PS - I've seen something similar using fontawesome icons here:


  5. Evan Herman
    Plugin Author

    Posted 2 years ago #


    So after making it home from work and taking a look into the example you provided, it doesn't look like they are using unordered lists.

    This is the code they are using to construct the list:

    <div class="q_icon_list"><i class="fa fa-hand-o-right pull-left transparent " style=""></i><p style="">Visual page builder and layer slider</p></div>

    You can do the same, but it will take some CSS styling to get it to look correct. You'll just need to swap out the class on the <i></i> tag, and add your text in to the paragraph tags.


  6. James R
    Posted 2 years ago #

  7. Evan Herman
    Plugin Author

    Posted 2 years ago #

    Yea the stack overflow answer should point you in the right direction. It's similar to adding icons to the menu in the documentation.

    You just need to specify the font name, and add the content associated to your icon within the CSS deceleration.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP SVG Icons
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic