CODEWITHSUNDEEP
htmlcss
eleethesontai
eleethesontai

Reputation: 546

Center custom bullets in UL

I have a ul and I changed the marker to the chevron_right from the google materials icons font. Problem is that the icons are not centered on the text. I cannot figure out why. So the question is how do I center the icon/bullet on the li text?

* {
  margin: 0;
}

li::marker {
  content: 'chevron_right';
  font-family: 'Material Icons';
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Upvotes: 0

Views: 70

Answers (2)

flppv
flppv

Reputation: 4289

I would use ::before instead of ::marker as a better pseudoelement for this, and center list items with flex.

* {
  margin: 0;
}


li {
  display: flex;
  align-items: center;
}

li::before {
  content: 'chevron_right';
  font-family: 'Material Icons';
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Upvotes: 1

Zak
Zak

Reputation: 7515

It's the Google font that your using .. I'd use a font-awesome instead.

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Item 1</li>
  <li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Item 2</li>
  <li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Item 3</li>
</ul>

More on FONT AWESOME LIST (UL) EMLEMENT

Upvotes: 0

Related Questions