0

I need to add different icons to the different items on the following list...

And this is the structure of the list without id's or classes, only with the role selector...

<ul class="main-nav" role="menu">
<li role="none"><a role="menuitem" href="#">Link 1</a></li>
<li role="none"><a role="menuitem" href="#">Link 2</a></li>
<li role="none"><a role="menuitem" href="#">Link 3</a></li>
<li role="none"><a role="menuitem" href="#">Link 4</a></li>
</ul>

As I said, every link needs to have a different icon.

Can you help me with the best way of doing this?

Thanks in advance!

Zé Pedro Bessa
  • 1
  • You have a similar solution here: https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon – Dicarva Jul 20 '22 at 11:13

1 Answers1

2

updated link: https://stackoverflow.com/a/13354689/10065267

You just need to change every <li> with the different icons :)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Then in CSS use something like child https://www.w3schools.com/cssref/sel_nth-child.asp

li:nth-child(1) {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

li:nth-child(2) {
  content: "\f2b9"; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

Here some example: https://jsfiddle.net/uaLmkbfv/1/

Dicarva
  • 75
  • 9