Center custom bullets in UL-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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 >
  <li><span ><i ></i></span>Item 1</li>
  <li><span ><i ></i></span>Item 2</li>
  <li><span ><i ></i></span>Item 3</li>
</ul>