WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Styling UL with SVG Icons

[Resolved] Styling UL with SVG Icons

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Evan Herman
    Participant

    @eherman24

    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.

    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.

    PS – I’ve seen something similar using fontawesome icons here:

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

    Plugin Author Evan Herman
    Participant

    @eherman24

    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

    Plugin Author Evan Herman
    Participant

    @eherman24

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Styling UL with SVG Icons’ is closed to new replies.