Using Font Awesomne icons in horizontal list-CodePudding

I am building a web site and I want a horizontal list containing three Font Awesome icons - log-in, favourite, and cart to look like this, with the words replaced by icons:

However, using the code recommended by Font Awesome:

   <div  >
                    <ul >
                          <li><span ><i ></i></span></li>
                          <li><span ><i ></i></span></li>
                          <li><span ><i ></i></span></li>
                    </ul>
                </div>

results in only the final icon dsiplaying:

The CSS for the element in question is:

.siteicons {
    grid-area: icons;
    justify-self: stretch;
    align-self: center;
}

.siteicons ul {
    display: grid;
    grid-template-columns: repeat(3,22vw);
}

.siteicons li {
    /* No bullets */
    text-align: left;
    list-style-type: none;
}

To my understanding, the icons should display in the way the text did, but that clearly isn't happening.

Does anyone have any suggestions, please?

All the best,

Dermot

CodePudding user response：

You can Try this :

 ul{
      list-style:none;
      display:flex;
  }
 li
 {
     margin:auto;
 }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
 <div  >
     <ul >
           <li><span ><i ></i></span></li>
           <li><span ><i ></i></span></li>
           <li><span ><i ></i></span></li>
     </ul>
  </div>

CodePudding user response：

Hello The problem is that the icon classes you are using do not exist in the version you are using. See an example with valid classes:

.siteicons {
    grid-area: icons;
    justify-self: stretch;
    align-self: center;
}

.siteicons ul {
    display: grid;
    grid-template-columns: repeat(3,22vw);
}

.siteicons li {
    /* No bullets */
    text-align: left;
    list-style-type: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

 <div  >
                    <ul >
                          <li><span ><i ></i></span></li>
                          <li><span ><i ></i></span></li>
                          <li><span ><i ></i></span></li>
                    </ul>
                </div>