page: txp5

Core SASS

form: txp5_scss

_icon.scss modified 49 days ago


    
      @font-face {
  font-family: 'core-line';
  src: url('/admin-themes/core/assets/fonts/core-line/fonts/core-line.ttf?7vrldv') format('truetype'),
    url('/admin-themes/core/assets/fonts/core-line/fonts/core-line.woff?7vrldv') format('woff'),
    url('/admin-themes/core/assets/fonts/core-line/fonts/core-line.svg?7vrldv#core-line') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ui-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'core-line' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  //line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: inline-block;
  font-size: 0; // hide text
  &:before {
    font-size: initial;
  }

  // &:hover:before {
  //   background-color: var(--clr-brand);
  //  border-radius: 50%;
  //  // aspect-ratio: 1/1;
  // }

}


.ui-icon-arrowthickstop-1-s:before,
.ui-icon-add:before,
.ui-icon-plus:before {
  content: "\e900";
}
.ui-icon-alert:before {
  content: "\e901";
}
.ui-icon-check:before {
  content: "\e902";
}
.ui-icon-check2:before {
  content: "\e903";
}
.ui-icon-close:before {
  content: "\e904";
}
.ui-icon-close2:before {
  content: "\e905";
}
.ui-icon-extlink:before {
  content: "\e906";
}
.ui-icon-help:before {
  content: "\e907";
}
.ui-icon-info:before {
  content: "\e908";
}

.ui-icon-arrowthickstop-1-n:before,
.ui-icon-subtract:before {
  content: "\e909";
}
.ui-icon-circ:before {
  content: "\e90b";
}
.ui-icon-txp:before {
  content: "\e90a";
}

.ui-icon-arrow:before {
}

.desc,
.asc {
  &:after {
    content: '>'; // placeholder
      display: inline-block;
      margin-inline-start: var(--base-unit--ss);
  }
}

.desc:after {
  transform: rotateZ(90deg) scaleX(.5);
}
.asc:after {
  transform: rotateZ(-90deg) scaleX(.5);
}

    

  

Source html

        
          <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>TXP5 Icon</th>
      <th>Hexadecimal Code</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td> add </td><td><span class="ui-icon ui-icon-add"></span></td><td>e900</td>
  </tr>
  <tr>
    <td> alert </td><td><span class="ui-icon ui-icon-alert"></span></td><td>e901</td>
  </tr>
  <tr>
    <td> check </td><td><span class="ui-icon ui-icon-check"></span></td><td>e902</td>
  </tr>
  <tr>
    <td> check2 </td><td><span class="ui-icon ui-icon-check2"></span></td><td>e903</td>
  </tr>
  <tr>
    <td> close </td><td><span class="ui-icon ui-icon-close"></span></td><td>e904</td>
  </tr>
  <tr>
    <td> close2 </td><td><span class="ui-icon ui-icon-close2"></span></td><td>e905</td>
  </tr>
  <tr>
    <td> extlink </td><td><span class="ui-icon ui-icon-extlink"></span></td><td>e906</td>
  </tr>
  <tr>
    <td> help </td><td><span class="ui-icon ui-icon-help"></span></td><td>e907</td>
  </tr>
  <tr>
    <td> info </td><td><span class="ui-icon ui-icon-info"></span></td><td>e908</td>
  </tr>
  <tr>
    <td> subtract </td><td><span class="ui-icon ui-icon-subtract"></span></td><td>e909</td>
  </tr>
  <tr>
    <td> circ </td><td><span class="ui-icon ui-icon-circ"></span></td><td>e90b</td>
  </tr>
  <tr>
    <td> txp </td><td><span class="ui-icon ui-icon-txp"></span></td><td>e90a</td>
  </tr>
  </tbody>
</table>