[Resolved] Styling Unordered List

[Janine]

Hi.

How can I use the FontAwesome scissors (f0c4) for my bullet points?

I would like to be able to control the size and colour. Thank you!

[Leo]

Hi there,

Couple solutions here: https://stackoverflow.com/questions/12468359/using-font-awesome-icon-for-bullet-points-with-a-single-list-item-element

[Janine]

Thanks, Leo. I will study it and see if I make it happen. Thanks!

[Janine]

Hi, Leo.

I found this code:

ul {
list-style: none;
}

ul li {
padding: 5px 0 5px 30px;
position: relative;
}

ul li:before {
content: ‘\f0c4’;
color: #222;
font-family: ‘FontAwesome’;
position: absolute;
top: 6px;
left: 5px;
}

And this code:

li{
list-style-type: none;
}

li:before {
content: “\f0c4”;
color: #222;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}

But neither works.

I have the second one installed on my demo site because it was the simplest of the two. And it is changed both the ul and ol. It removed both bullets and numbering.

Link to demo site: http://2ea52d4b.ngrok.io/ul-ol-post/

Do you have any ideas? Thank you!

[Jamal]

Hi

The following has worked for me, you might want to give it a try. This is the css i used

ul.scissor-list {
  list-style-type: none;
  margin: 0 0 1.5em 1.5em;
}

.scissor-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px
}

.scissor-list li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f0c4";
  color: #d3782d;
}

But in your html you have to put the scissor-list class like this

<ul class="scissor-list">
<li> First item </li>
<li> Second item </li>
<li> Next items </li>
</ul>

[Janine]

Hi, Jamal.

Thank you so much for your help. It did change. But I still don’t have the scissors icon.

[Leo]

Just tested and Jamal’s method worked perfectly.

What are you seeing?

[Janine]

Hi, Leo.

Here’s link to what I’m getting with Jamal’s meethod:

http://2ea52d4b.ngrok.io/ul-ol-post/

Thank you!

[Leo]

Make sure load essential icons option is not checked.

[Janine]

Leo, where is this setting? Thank you.

[Janine]

Is it under General in the customizer: Cache dynamic CSS?

[Leo]

Meant to say load essential icons:https://docs.generatepress.com/article/general-settings-overview/

[Janine]

OMG, that worked and they look beautiful! Thanks, Leo.

[Janine]

Leo, do you think I will take much of a performance hit? Thank you!

[Janine]

And Jamal, I hope you get this message: Many thanks for your generosity! I appreciate it!

(Leo, let me know how I can pass on my message to Jamal. Thank you!)

[Author]

Posts