Grow your CSS skills. Land your dream job.

icon font for bullet points, tried li:before

  • # February 16, 2013 at 8:53 am

    I tried this:

    ul {list-style-type:none;}
    li:before {content:" ";} /* notice trailing space */

    and the bullet points went away but the Chrome web inspector only showed this:

    li::before{
    content: " ";
    }

    Any ideas why?
    FYI: I am using a WordPress site with a theme that supports LESS CSS (based on Twitter Bootstrap, which includes Font Awesome).

    Thank you.

    # February 16, 2013 at 9:08 am

    They wouldn’t both be applied to the same element. `li:before` would be on the list item, `ul` would be on the unordered list. So if you select the unordered list, you ought to be able to see that styling. Is that your problem?

    # February 16, 2013 at 9:26 am

    With LESS shouldn’t that be

    ul {list-style-type:none;

    li:before {
    content:” “;
    }
    } /*closing brace here*/

    # February 21, 2013 at 11:27 am

    @Paulie_D
    Yes, that works the same, but I guess the issue is that the icon font doesn’t “work”…

    Here’s the CSS in the Chrome inspector for the Font Awesome icon-search icon: http://screencast.com/t/dYB2urp7R

    So I tried these and neither worked:

    ul {list-style-type:none;
    li:before {
    content:” “;
    }
    }

    ul {list-style-type:none;
    li:before {
    content:”f002 “;
    }
    }

    # February 21, 2013 at 11:31 am

    You can’t put HTML is the ‘content’ property….AFAIK.

    I also think that you would have to specify dimensions for the second option.

    # February 21, 2013 at 11:32 am

    You can’t insert HTML with CSS generated content. This would be awful.

    The second option should work as long as you define the appropriate icon font for li:before. This is how FontAwesome handles icons as bullets for list items.

    # February 21, 2013 at 11:41 am

    Oh…sorry…I forgot.

    Not dimensions…you need…

    li {
    position:relative;
    }

    li:before {
    postition:absolute;
    }

    http://codepen.io/Paulie-D/pen/CiFjJ

    # February 21, 2013 at 11:42 am

    Something like this should work, I think:

    li:before {
    content:”f002 “;
    font-family: FontAwesome;
    margin-right: .5em;
    }

    Edited: Yep, checked on a local dev site I’m running Font Awesome on.

    @Paulie_D, why would positioning need to be set to make this work? Just curious.

    # February 22, 2013 at 6:32 am

    @JoshBlackwood

    That worked. Thanks!

    Now… if I want to put all the Font Awesome fonts into a WordPress theme drop-down option (to pick the icon you want to use), **how can I get a PHP variable’s value into the LESS file?**

    # February 22, 2013 at 6:45 am

    >why would positioning need to be set to make this work?

    Force of habit with me (even when I shouldn’t)…too many clever tricks with pseudo-elements & borders. :)

    # February 22, 2013 at 11:09 am

    >Force of habit with me (even when I shouldn’t)…too many clever tricks with pseudo-elements & borders. :)

    Ah, gotcha. Totally understand — I’m used to working with our organization’s 7,000+ line stylesheet, and there are way too many instances of positioning and z-index fixes, so basically any layout change requires some creative thinking.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".