html - 字体真棒图标没有像预期的那样工作变得空白

Question

我正在使用字体真棒图标创建一个侧边栏，我在其中放置了三个图标，但我只有一个出现在侧边栏中，其余两个图标没有出现。

.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>

这里我有代码参考。 提琴手

标签： htmlcssfont-awesome

Answer 1

font-weight添加到<i>标签 ( )的属性.c-menu>ul .c-menu__item i会阻止字体真棒图标显示。

.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>