How to change the style of li element decoration from bullet point to an chevron

Question

I am currently creating a list this should instead of the default element ● would like to have a chevron right like in the example photo. However, I do not use bootstrap but Bulma. Is there an option to get this somehow without bootstrap. I did it with the character >. However, this one is not as nice as the chevron right .

So my question how can I replace the character '>' with such a 'chevron right' without using bootstrap?

chevron right

HTML

<ul className="footer-link">
    <li>
        First 1
    </li>
    <li>
        Second 1
    </li>
    <li>
        Third 1
    </li>
</ul>

CSS

.footer-link ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.footer-link ul li {
    padding-left: 1em;
    text-indent: -1em;
}

.footer-link li:before {
    content: ">";
    padding-right: 5px;
}

What I want

The chevron in this example is isosceles and moreover it is centered from the text height.

Example

<i class="bi bi-chevron-right"></i>

score 0 · Accepted Answer · answered May 29 '21 at 10:25

0

How about using the ::marker pseudo element? See https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

It seems to be relatively new, so keep browser support in mind: https://caniuse.com/css-marker-pseudo

An example:

ul li::marker {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
}

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>


<!-- This is just needed to that I can use FontAwesome here on SO -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

answered May 29 '21 at 10:25

MBuchalik

180
1
8

For some reason this does not work with `:marker` but with the `:before` it did work – getName May 29 '21 at 10:36
I have tested my code in Firefox + Chrome and it worked in both. Are you maybe using an older browser that is not supported according to [caniuse](https://caniuse.com/css-marker-pseudo)? Using `::before` also works, that is true. See for example https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon – MBuchalik May 29 '21 at 12:02

score 0 · Answer 2 · answered May 29 '21 at 10:30

are you allowed to use font awesome?

<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-down"></i></span>First 1</li>
  <li><span class="fa-li"><i class="fas fa-chevron-down"></i></span>Second 1</li>
  <li><span class="fa-li"><i class="fas fa-chevron-down"></i></span>Third 1</li>
</ul>

How to change the style of li element decoration from bullet point to an chevron

2 Answers2