Submenu icon is not displaying

user_4480164 0
Viewed 258

I have a submenu, I tried to inspect elements, but I have no idea what icon it is using.

enter image description here

I am using font-awesome.

Can someone show me how to debug this?

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<li class="sub-menu toggled">
    <a href=""><i class="fa fa-cog"></i> Settings </a>

    <ul style="display: block;">
        <li><a href="/babies"><i class="fa fa-baby"></i>Babies</a></li>
        <li><a href="/tennant"><i class="fa fa-user-o"></i>Tennants</a></li>
        <li><a href="/milestone"><i class="fa fa-star-o"></i>Milestones</a></li>
        <li><a href="/console"><i class="fa fa-terminal"></i>Console</a></li>
        <li><a href="/api-mapper-image"><i class="fa fa-cloud"></i>API Mappers</a></li>
    </ul>
</li>

enter image description here

I think it used

<i class="fas fa-caret-down"></i>

But I can't find it programed.

font-awesome css
4 Answers

The icon they used is this one

<i class="fas fa-chevron-down"></i>
user_140380230

I think the code you are showing is old following changes may help:

Outline Style Icons
Similarly, all icons that had an outlined style (and usually ended with -o) now have a prefix of far and have had their -o suffix removed.

So your code could be:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<li class="sub-menu toggled">
  <a href=""><i class="fas fa-cog"></i> Settings </a>

  <ul style="display: block">
    <li>
      <a href="/babies"><i class="fas fa-baby"></i>Babies</a></li>
    <li><a href="/tennant"><i class="far fa-user"></i>Tennants</a></li>
    <li><a href="/tennant"><i class="fas fa-user"></i>Tennants</a></li>
    <li><a href="/milestone"><i class="far fa-star"></i>Milestones</a></li>
    <li><a href="/milestone"><i class="fas fa-star"></i>Milestones</a></li>
    <li><a href="/console"><i class="fas fa-terminal"></i>Console</a></li>
    <li>
      <a href="/api-mapper-image"><i class="fas fa-cloud"></i>API Mappers</a></li>
  </ul>
</li>

fas is for solid icons and far for outlined icons.
Here is their guide to upgrade from version 4. https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/upgrading-from-version-4#changes

Actually they are not icons. It's a font!
Simplified version of it would look like this:

<!DOCTYPE html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
  <style>
    body {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      color: rgba(172, 107, 10, 0.9);
    }
    
    i::before {
      content: '\f013'/* unicode char &#xf77c for fa-cog*/
    }
  </style>
</head>

<body>
  <i> using :before pseudo element</i>

  <p>fa-cog: &#xf013; fa-babiy: &#xf77c; fa-star: &#xf005; fa-cloud &#xf0c2; fa-terminal &#xf120;</p>
  <p>underlined: <u>&#xf013</u></p>
  <p>emphasized:<em>&#xf013</em></p>
  <p style="text-decoration: green wavy underline;">multiple text decorations &#xf0c2 and more...</p>
</body>

</html>

As you can see you can color them, do all sorts of stuff that you can do with text in css.

For example if we want to use caret-down icon using code <i class="fas fa-caret-down"></i>, the effective html, removing all unwanted suff would look like this:

<!DOCTYPE html>

<head>
  <style>
    @font-face {
      font-family: "Font Awesome 5 Free";
      font-style: normal;
      font-weight: 900;
      font-display: block;
      src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot");
      src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.svg#fontawesome") format("svg");
    }
    
    .fas {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
    }
    
    .fa-caret-down:before {
      content: "\f0d7";
    }
  </style>
</head>

<body>
  <i class="fas fa-caret-down"></i>
</body>

</html>

user_152739680

The problem is because the icons that are used in the menu bar is Pro version of Font awesome. If you want to use the same icons you need to subscribe to font awesome, or you can find alternative free icons in font awesome. You can find them below.

ul{
    list-style-type: none;
}
a{
    text-decoration:none;
    color: black;
}
a i{
    margin-inline: 1rem;
    font-size: 1.2rem;

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
  <title>Test</title>
</head>

<body>

  <li class="sub-menu toggled">
    <a href=""><i class="fa fa-cog"></i> Settings </a>
    <ul style="display: block;">
      <li><a href="/babies"><i class="fas fa-baby"></i>Babies</a></li>
      <li><a href="/tennant"><i class="fas fa-user"></i>Tennants</a></li>
      <li><a href="/milestone"><i class="fas fa-star"></i>Milestones</a></li>
      <li><a href="/console"><i class="fas fa-terminal"></i>Console</a></li>
      <li><a href="/api-mapper-image"><i class="fas fa-cloud"></i>API Mappers</a></li>
    </ul>
  </li>

</body>

</html>

if you still wanted the same exact icons, there are several alternative for that. https://icons8.com/ https://lineicons.com/blog/font-awesome-alternatives/

user_142019130

If you check the link of the font-awesome styles that you are importing, you will see that a few of the classes that you are using does not exist (at least on that version 5.15.4 that you are importing). You should find classes in the documentation for that particular version.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

I searched each one and classes that do not exist are:

  1. fa fa-user-o - You can use fas fa-user instead
  2. fa fa-star-o - You can use fas fa-star instead

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<li class="sub-menu toggled">
    <a href=""><i class="fa fa-cog"></i> Settings </a>

    <ul style="display: block;">
        <li><a href="/tennant"><i class="fas fa-user"></i>Tennants</a></li>
        <li><a href="/milestone"><i class="fas fa-star"></i>Milestones</a></li>
    </ul>
</li>

Also, in order to see what is used in the code, you should expand the <a> tag in DevTools.

enter image description here

user_143898300
Related