WordPress.org

Forums

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

  1. James R
    Member
    Posted 1 year 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?

    Thanks,
    James

    https://wordpress.org/plugins/svg-vector-icon-plugin/

  2. Evan Herman
    Member
    Plugin Author

    Posted 1 year 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
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

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

    http://demo.qodeinteractive.com/bridge/lists/

  5. Evan Herman
    Member
    Plugin Author

    Posted 1 year ago #

    Hey,

    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.

    Evan

  6. James R
    Member
    Posted 1 year ago #

  7. Evan Herman
    Member
    Plugin Author

    Posted 1 year 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

Tags