Changing the title with Font Awesome


#1

Hello.

Can u help me with this code (.CSS & .HTML) to change on the front of the first page: Category, Replies, Views, Activity with Font Awesome?

.CSS

Summary
  .topic-list-header-label {
  position: relative;
  text-align: center;
  display: block;

  &:before {
    content: "";
    display: inline-block;
    font: normal normal normal 18px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .posters > &:before { content: "\f0c0"; }
  .posts > &:before { content: "\f0a1"; }
  .views > &:before { content: "\f06e"; }
  .activity > &:before { content: "\f017"; }

}

th:not(.default)  {
  .topic-list-header-label > span {
    display:none;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 11px;
    border-radius: 5px;
    padding: 5px;
    bottom: 120%;
    left: 50%;
    transform:translate(-50%, 0);
    position: absolute;
    border: 1px solid #fff;
  }

  &:hover .topic-list-header-label > span {
    display: block;
  }
}


th.default .topic-list-header-label {
  &, span {
      display: inline-block !important;
  }

  &:before {
    display: none !important;
  }
}

// td.category .badge-wrapper {
//   display: block;
//   width: 100%;
//   font-size: .8em;
//   margin: 0;
//   border-radius: 3px;
//   overflow: hidden;
//   text-align: center;

//   .badge-category {
//     margin: 0;
//     padding: 5px;
//   }
// }

(this is not my code)

I’ve tried but doesn’t work. Thank you! :discourse:


(Kris) #2

This should start you off in the right direction, but likely needs some adjustment. Curious: where did that code come from? It seems to be relying on some additional classes that aren’t part of the layout by default.

.topic-list {
    th {
      &:before {
        visibility: visible;
        content: "";
        display: inline-block;
        font-family: FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        margin: 0 2px;
      }

      &.posters:before { content: "\f0c0"; }
      &.posts:before { content: "\f0a1"; }
      &.views:before { content: "\f06e"; }
      &.activity:before { content: "\f017"; }
    }
    
    th:not(.default):not(.category)  {
        visibility: collapse;
        width: 85px;
        &:hover {
            visibility: visible;
            background: #e9e9e9;
        }
    }
    
    .num {
        text-align: left;
    }
}