icon font for bullet points, tried li:before

[cliffordp]

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.

[howlermiller]

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?

[Paulie_D]

With LESS shouldn’t that be

ul {list-style-type:none;

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

[cliffordp]

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

[Paulie_D]

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

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

[Kitty Giraudel]

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.

[Paulie_D]

Oh…sorry…I forgot.

Not dimensions…you need…

li {
position:relative;
}

li:before {
postition:absolute;
}

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

[cliffordp]

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

[Paulie_D]

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

[Author]

Posts