Skip to main content

Forums

This topic contains 10 replies, has 0 voices, and was last updated by  cliffordp 5 years, 12 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #42780

    cliffordp
    Member

    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.

    #124873

    howlermiller
    Participant

    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?

    #124874

    Paulie_D
    Moderator

    With LESS shouldn’t that be

    ul {list-style-type:none;

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

    #125548

    cliffordp
    Member

    @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 “;
    }
    }

    #125552

    Paulie_D
    Moderator

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

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

    #125553

    Hugo Giraudel
    Participant

    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.

    #125559

    Paulie_D
    Moderator

    Oh…sorry…I forgot.

    Not dimensions…you need…

    li {
    position:relative;
    }

    li:before {
    postition:absolute;
    }

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

    #125669

    cliffordp
    Member

    @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?**

    #125671

    Paulie_D
    Moderator

    >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. :)

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star