WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. James R
    Member
    Posted 3 months 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 3 months 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 3 months 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 3 months ago #

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

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

  5. Evan Herman
    Member
    Plugin Author

    Posted 3 months 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 3 months ago #

  7. Evan Herman
    Member
    Plugin Author

    Posted 3 months 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.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags