File: modules/system/assets/ui/less/icon.less

//
// Icon
// --------------------------------------------------

@import "global.less";
@import "icon.close.less";


@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: @fa-font-display;
    src: url('@{icon-font-path}/fa-regular-400.woff2?v=@{icon-font-version}') format('woff2'),
      url('@{icon-font-path}/fa-regular-400.ttf?v=@{icon-font-version}') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: @fa-font-display;
    src: url('@{icon-font-path}/fa-solid-900.woff2?v=@{icon-font-version}') format('woff2'),
      url('@{icon-font-path}/fa-solid-900.ttf?v=@{icon-font-version}') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: @fa-font-display;
    src: url('@{icon-font-path}/fa-brands-400.woff2?v=@{icon-font-version}') format('woff2'),
      url('@{icon-font-path}/fa-brands-400.ttf?v=@{icon-font-version}') format('truetype');
}

//
// Standard icons
//

[class^="icon-"],
[class*=" icon-"] {
    .icon-FontAutumn();
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;

    &::before {
        text-decoration: inherit;
        display: inline-block;
    }

    &.icon-border {
        border-color: @fa-border-color;
        border-radius: @fa-border-radius;
        border-style: @fa-border-style;
        border-width: @fa-border-width;
        padding: @fa-border-padding;
    }

    &.pull-left {
        margin-right: .3em;
    }

    &.pull-right {
        margin-left: .3em;
    }
}

.far,
.icon-regular,
.wn-icon-regular,
.oc-icon-regular {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
}

.fad,
.icon-solid,
.wn-icon-solid,
.oc-icon-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.fab,
.icon-brands,
.wn-icon-brands,
.oc-icon-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

//
// Prefixed icons ("wn-")
//

[class^="wn-icon-"],
[class*=" wn-icon-"],
[class^="oc-icon-"],
[class*=" oc-icon-"] {
    &:before {
        display: inline-block;
        margin-right: 8px;
        .icon-FontAutumn();
        vertical-align: baseline;
    }
    &.empty:before {
        margin-right: 0;
    }
}

//
// Icon Sizes
//

.icon-1x {
    font-size: 1em;
}
.icon-2x {
    font-size: 2em;
}
.icon-3x {
    font-size: 3em;
}
.icon-4x {
    font-size: 4em;
}
.icon-5x {
    font-size: 5em;
}
.icon-6x {
    font-size: 6em;
}
.icon-7x {
    font-size: 7em;
}
.icon-8x {
    font-size: 8em;
}
.icon-9x {
    font-size: 9em;
}
.icon-10x {
    font-size: 10em;
}
.icon-2xs {
    font-size: 0.625em;
    line-height: 0.1em;
    vertical-align: 0.225em;
}
.icon-xs {
    font-size: 0.75em;
    line-height: 0.08333333em;
    vertical-align: 0.125em;
}
.icon-sm {
    font-size: 0.875em;
    line-height: 0.07142857em;
    vertical-align: 0.05357143em;
}
.icon-lg {
    font-size: 1.25em;
    line-height: 0.05em;
    vertical-align: -0.075em;
}
.icon-xl {
    font-size: 1.5em;
    line-height: 0.04166667em;
    vertical-align: -0.125em;
}
.icon-2xl {
    font-size: 2em;
    line-height: 0.03125em;
    vertical-align: -0.1875em;
}

//
// Icons in a list (borrowed from Font Awesome 6)
//

.icon-ul {
    list-style-type: none;
    margin-left: @fa-li-margin;
    padding-left: 0;

    > li { position: relative; }
}

.icon-li {
    left: @fa-li-width * -1;
    position: absolute;
    text-align: center;
    width: @fa-li-width;
    line-height: inherit;
}

@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_mixins.less";
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_fixed-width.less";
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_animated.less";
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_rotated-flipped.less";
@import "../../../../../node_modules/@fortawesome/fontawesome-free/less/_screen-reader.less";