Forums

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:"<i class='icon-search'></i> ";
     }
}

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.

HugoGiraudel

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

JoshBlackwood

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.

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

JoshBlackwood

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.

treehouse : what would you like to learn today?

Forums

[Solved] icon font for bullet points, tried li:before