0

I was creating a sidebar using font awesome icon where i place three icons but i got only one is appearing in the sidebar the rest two icons is not appearing.

.u-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-sidebar {
  width: 70px;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  bottom: 0;
  background: #102c58;
  -webkit-transition: width 0.5s ease-in-out;
  -moz-transition: width 0.5s ease-in-out;
  -ms-transition: width 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
  height: fit-content;
}

.l-sidebar .logo {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #051835;
}

.l-sidebar .logo .logo__txt {
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

.l-sidebar__content {
  height: 100%;
  position: relative;
}

.sidebar-is-expanded .l-sidebar {
  width: 220px;
}

.c-menu>ul {
  display: flex;
  flex-direction: column;
}

.c-menu>ul .c-menu__item {
  color: #fff;
  max-width: 100%;
  overflow: hidden;
}

.c-menu>ul .c-menu__item__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 60px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.c-menu>ul .c-menu__item__inner:before {
  position: absolute;
  content: " ";
  height: 0;
  width: 2px;
  left: 0;
  top: 50%;
  margin-top: -18px;
  background-color: #5f9cfd;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner {
  border-left-color: #5f9cfd;
  background-color: #1e3e6f;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner i {
  color: #5f9cfd;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {
  color: #5f9cfd;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner:before {
  height: 36px;
  opacity: 1;
}

.c-menu>ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {
  background-color: #f5642d;
  border-left-color: #f5642d;
}

.c-menu>ul .c-menu__item i {
  flex: 0 0 70px;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.c-menu>ul .c-menu__item .c-menu-item__expand {
  position: relative;
  left: 100px;
  padding-right: 20px;
  margin-left: auto;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.sidebar-is-expanded .c-menu>ul .c-menu__item .c-menu-item__expand {
  left: 0px;
}

.c-menu>ul .c-menu__item .c-menu-item__title {
  flex-basis: 100%;
  padding-right: 10px;
  position: relative;
  left: 220px;
  opacity: 0;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.c-menu>ul .c-menu__item .c-menu-item__title span {
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.sidebar-is-expanded .c-menu>ul .c-menu__item .c-menu-item__title {
  left: 0px;
  opacity: 1;
}

.c-menu>ul .c-menu__item .c-menu__submenu {
  background-color: #051835;
  padding: 15px;
  font-size: 12px;
  display: none;
}

.c-menu>ul .c-menu__item .c-menu__submenu li {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid;
  border-color: #072048;
  color: #5f9cfd;
}

.c-menu>ul .c-menu__item .c-menu__submenu li:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}

main.l-main {
  width: 100%;
  height: 100%;
  padding: 70px 0 0 70px;
  -webkit-transition: padding 0.5s ease-in-out;
  -moz-transition: padding 0.5s ease-in-out;
  -ms-transition: padding 0.5s ease-in-out;
  -o-transition: padding 0.5s ease-in-out;
  transition: padding 0.5s ease-in-out;
}

main.l-main .content-wrapper {
  padding: 25px;
  height: 100%;
}

main.l-main .content-wrapper .page-content {
  border-top: 1px solid #d0d0d0;
  padding-top: 25px;
}

main.l-main .content-wrapper--with-bg .page-content {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  padding: 25px;
}

main.l-main .page-title {
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 25px;
}

.sidebar-is-expanded main.l-main {
  padding-left: 220px;
}
<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" />

<div class="l-sidebar">
  <div class="l-sidebar__content">
    <nav class="c-menu js-menu" style="height:568px">
      <ul class="u-list">
        <li class="c-menu__item is-active" #tooltip="matTooltip" matTooltip="Notitfications" [matTooltipPosition]="position.value">
          <div class="c-menu__item__inner"><i class="fas fa-bell"></i>
            <div class="c-menu-item__title"><span>Notitfications</span></div>
          </div>
        </li>
        <li class="c-menu__item" #tooltip="matTooltip" matTooltip="Consultation" [matTooltipPosition]="position.value">
          <div class="c-menu__item__inner"><i class="fas fa-user-friends"></i>
            <div class="c-menu-item__title"><span>Consultation</span></div>
          </div>
        </li>
        <li class="c-menu__item" #tooltip="matTooltip" matTooltip="Patients" [matTooltipPosition]="position.value">
          <div class="c-menu__item__inner"><i class="fas fa-hospital-user"></i>
            <div class="c-menu-item__title"><span>Patients</span></div>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>

Here I have code reference. Jsfiddle

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
Mr.M
  • 1,472
  • 3
  • 29
  • 76

2 Answers2

3

It's the font-weight property added to the <i> tag (.c-menu>ul .c-menu__item i) that is preventing font awesome icons to show.

.u-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-sidebar {
  width: 70px;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  bottom: 0;
  background: #102c58;
  -webkit-transition: width 0.5s ease-in-out;
  -moz-transition: width 0.5s ease-in-out;
  -ms-transition: width 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
  height: fit-content;
}

.l-sidebar .logo {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #051835;
}

.l-sidebar .logo .logo__txt {
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

.l-sidebar__content {
  height: 100%;
  position: relative;
}

.sidebar-is-expanded .l-sidebar {
  width: 220px;
}

.c-menu>ul {
  display: flex;
  flex-direction: column;
}

.c-menu>ul .c-menu__item {
  color: #fff;
  max-width: 100%;
  overflow: hidden;
}

.c-menu>ul .c-menu__item__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 60px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.c-menu>ul .c-menu__item__inner:before {
  position: absolute;
  content: " ";
  height: 0;
  width: 2px;
  left: 0;
  top: 50%;
  margin-top: -18px;
  background-color: #5f9cfd;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner {
  border-left-color: #5f9cfd;
  background-color: #1e3e6f;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner i {
  color: #5f9cfd;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {
  color: #5f9cfd;
}

.c-menu>ul .c-menu__item.is-active .c-menu__item__inner:before {
  height: 36px;
  opacity: 1;
}

.c-menu>ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {
  background-color: #f5642d;
  border-left-color: #f5642d;
}

.c-menu>ul .c-menu__item i {
  flex: 0 0 70px;
  font-size: 18px;
  /* font-weight: normal; */  /* REMOVE THIS */
  text-align: center;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.c-menu>ul .c-menu__item .c-menu-item__expand {
  position: relative;
  left: 100px;
  padding-right: 20px;
  margin-left: auto;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.sidebar-is-expanded .c-menu>ul .c-menu__item .c-menu-item__expand {
  left: 0px;
}

.c-menu>ul .c-menu__item .c-menu-item__title {
  flex-basis: 100%;
  padding-right: 10px;
  position: relative;
  left: 220px;
  opacity: 0;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.c-menu>ul .c-menu__item .c-menu-item__title span {
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.sidebar-is-expanded .c-menu>ul .c-menu__item .c-menu-item__title {
  left: 0px;
  opacity: 1;
}

.c-menu>ul .c-menu__item .c-menu__submenu {
  background-color: #051835;
  padding: 15px;
  font-size: 12px;
  display: none;
}

.c-menu>ul .c-menu__item .c-menu__submenu li {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid;
  border-color: #072048;
  color: #5f9cfd;
}

.c-menu>ul .c-menu__item .c-menu__submenu li:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}

main.l-main {
  width: 100%;
  height: 100%;
  padding: 70px 0 0 70px;
  -webkit-transition: padding 0.5s ease-in-out;
  -moz-transition: padding 0.5s ease-in-out;
  -ms-transition: padding 0.5s ease-in-out;
  -o-transition: padding 0.5s ease-in-out;
  transition: padding 0.5s ease-in-out;
}

main.l-main .content-wrapper {
  padding: 25px;
  height: 100%;
}

main.l-main .content-wrapper .page-content {
  border-top: 1px solid #d0d0d0;
  padding-top: 25px;
}

main.l-main .content-wrapper--with-bg .page-content {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  padding: 25px;
}

main.l-main .page-title {
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 25px;
}

.sidebar-is-expanded main.l-main {
  padding-left: 220px;
}
<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" />

<div class="l-sidebar">
  <div class="l-sidebar__content">
    <nav class="c-menu js-menu" style="height:568px">
      <ul class="u-list">
        <li class="c-menu__item is-active" #tooltip="matTooltip" matTooltip="Notitfications" [matTooltipPosition]="position.value">
          <div class="c-menu__item__inner"><i class="fas fa-bell"></i>
            <div class="c-menu-item__title"><span>Notitfications</span></div>
          </div>
        </li>
        <li class="c-menu__item" #tooltip="matTooltip" matTooltip="Consultation" [matTooltipPosition]="position.value">
          <div class="c-menu__item__inner"><i class="fas fa-user-friends"></i>
            <div class="c-menu-item__title"><span>Consultation</span></div>
          </div>
        </li>
        <li class="c-menu__item" #tooltip="matTooltip" matTooltip="Patients" [matTooltipPosition]="position.value">
          <div class="c-menu__item__inner"><i class="fas fa-hospital-user"></i>
            <div class="c-menu-item__title"><span>Patients</span></div>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>
Debsmita Paul
  • 1,442
  • 9
  • 22
2

Use the JS-bundle and it's showing the buttons. The documentation points out you would also have to host the fonts as well to use the css files https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.svg

As our are using cloudflare I would replace the css-import with the js-import:

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous"></script>
Hellmy
  • 76
  • 6
  • ok i got your point but how the first icon alone is coming without JavaScript cdn that is also a button right – Mr.M Apr 09 '21 at 07:41
  • probaly thats already in the default font on your machine - see: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself -- There they describe the usage of the css file only with the svg-fonts. So I would assume the webfonts are missing on your machine. see https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.svg – Hellmy Apr 09 '21 at 07:42
  • looks like your css has some issue. I edited your fiddle with the icons only and they are showing up. Try checking the css of parent elements to icon element – phi lo czar Apr 09 '21 at 07:47