page: txp5
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>