Icons | chattigo-webkit Documentation

Icons classes

[class^='icon-'], [class*=' icon-']

scss

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-size: $font-size-icon;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
}

Base styles for icons elements

.icon-ability

scss

.icon-ability {
  &::before {
    content: '\e908';
  }
}

Class for use the ability icon

Example

html

<span class="icon-ability"></span>

.icon-admin

scss

.icon-admin {
  &::before {
    content: '\e91f';
  }
}

Class for use the admin icon

Example

html

<span class="icon-admin"></span>

.icon-archive

scss

.icon-archive {
  &::before {
    content: '\e94b';
  }
}

Class for use the archive icon

Example

html

<span class="icon-archive"></span>

.icon-archive-filled

scss

.icon-archive-filled {
  &::before {
    content: '\e94d';
  }
}

Class for use the archive-filled icon

Example

html

<span class="icon-archive-filled"></span>

.icon-arrow-down

scss

.icon-arrow-down {
  &::before {
    content: '\e950';
  }
}

Class for use the arrow-down icon

Example

html

<span class="icon-arrow-down"></span>

.icon-arrow-left

scss

.icon-arrow-left {
  &::before {
    content: '\e901';
  }
}

Class for use the arrow-left icon

Example

html

<span class="icon-arrow-left"></span>

.icon-arrow-right

scss

.icon-arrow-right {
  &::before {
    content: '\e902';
  }
}

Class for use the arrow-right icon

Example

html

<span class="icon-arrow-right"></span>

.icon-arrow-up

scss

.icon-arrow-up {
  &::before {
    content: '\e954';
  }
}

Class for use the arrow-up icon

Example

html

<span class="icon-arrow-up"></span>

.icon-attachment

scss

.icon-attachment {
  &::before {
    content: '\e92c';
  }
}

Class for use the attachment icon

Example

html

<span class="icon-attachment"></span>

.icon-camera

scss

.icon-camera {
  &::before {
    content: '\e900';
  }
}

Class for use the camera icon

Example

html

<span class="icon-camera"></span>

.icon-chat-transfer

scss

.icon-chat-transfer {
  &::before {
    content: '\e92d';
  }
}

Class for use the chat-transfer icon

Example

html

<span class="icon-chat-transfer"></span>

.icon-chats-inbox

scss

.icon-chats-inbox {
  &::before {
    content: '\e90b';
  }
}

Class for use the chats-inbox icon

Example

html

<span class="icon-chats-inbox"></span>

.icon-check

scss

.icon-check {
  &::before {
    content: '\e904';
  }
}

Class for use the check icon

Example

html

<span class="icon-check"></span>

.icon-check-circle

scss

.icon-check-circle {
  &::before {
    content: '\e90c';
  }
}

Class for use the check-circle icon

Example

html

<span class="icon-check-circle"></span>

.icon-clock

scss

.icon-clock {
  &::before {
    content: '\e93f';
  }
}

Class for use the clock icon

Example

html

<span class="icon-clock"></span>

.icon-clock-add

scss

.icon-clock-add {
  &::before {
    content: '\e926';
  }
}

Class for use the clock-add icon

Example

html

<span class="icon-clock-add"></span>

.icon-close

scss

.icon-close {
  &::before {
    content: '\e931';
  }
}

Class for use the close icon

Example

html

<span class="icon-close"></span>

.icon-config

scss

.icon-config {
  &::before {
    content: '\e955';
  }
}

Class for use the config icon

Example

html

<span class="icon-config"></span>

.icon-daily

scss

.icon-daily {
  &::before {
    content: '\e934';
  }
}

Class for use the daily icon

Example

html

<span class="icon-daily"></span>

.icon-datetime

scss

.icon-datetime {
  &::before {
    content: '\e939';
  }
}

Class for use the datetime icon

Example

html

<span class="icon-datetime"></span>

.icon-download

scss

.icon-download {
  &::before {
    content: '\e932';
  }
}

Class for use the download icon

Example

html

<span class="icon-download"></span>

.icon-edit

scss

.icon-edit {
  &::before {
    content: '\e92f';
  }
}

Class for use the edit icon

Example

html

<span class="icon-edit"></span>

.icon-emoji

scss

.icon-emoji {
  &::before {
    content: '\e95a';
  }
}

Class for use the emoji icon

Example

html

<span class="icon-emoji"></span>

.icon-faq

scss

.icon-faq {
  &::before {
    content: '\e961';
  }
}

Class for use the faq icon

Example

html

<span class="icon-faq"></span>

.icon-gallery

scss

.icon-gallery {
  &::before {
    content: '\e905';
  }
}

Class for use the gallery icon

Example

html

<span class="icon-gallery"></span>

.icon-group

scss

.icon-group {
  &::before {
    content: '\e91d';
  }
}

Class for use the group icon

Example

html

<span class="icon-group"></span>

.icon-intervention

scss

.icon-intervention {
  &::before {
    content: '\e958';
  }
}

Class for use the intervention icon

Example

html

<span class="icon-intervention"></span>

.icon-location

scss

.icon-location {
  &::before {
    content: '\e907';
  }
}

Class for use the location icon

Example

html

<span class="icon-location"></span>

.icon-locked

scss

.icon-locked {
  &::before {
    content: '\e923';
  }
}

Class for use the locked icon

Example

html

<span class="icon-locked"></span>

.icon-logout

scss

.icon-logout {
  &::before {
    content: '\e929';
  }
}

Class for use the logout icon

Example

html

<span class="icon-logout"></span>

.icon-location-alt

scss

.icon-location-alt {
  &::before {
    content: '\e90a';
  }
}

Class for use the location-alt icon

Example

html

<span class="icon-location-alt"></span>

.icon-maintainer

scss

.icon-maintainer {
  &::before {
    content: '\e920';
  }
}

Class for use the maintainer icon

Example

html

<span class="icon-maintainer"></span>

.icon-megaphone

scss

.icon-megaphone {
  &::before {
    content: '\e956';
  }
}

Class for use the megaphone icon

Example

html

<span class="icon-megaphone"></span>

.icon-members

scss

.icon-members {
  &::before {
    content: '\e924';
  }
}

Class for use the members icon

Example

html

<span class="icon-members"></span>

.icon-menu-options

scss

.icon-menu-options {
  &::before {
    content: '\e93b';
  }
}

Class for use the menu-options icon

Example

html

<span class="icon-menu-options"></span>

.icon-message

scss

.icon-message {
  &::before {
    content: '\e953';
  }
}

Class for use the message icon

Example

html

<span class="icon-message"></span>

.icon-message-direct

scss

.icon-message-direct {
  &::before {
    content: '\e921';
  }
}

Class for use the message-direct icon

Example

html

<span class="icon-message-direct"></span>

.icon-message-filled

scss

.icon-message-filled {
  &::before {
    content: '\e94f';
  }
}

Class for use the message-filled icon

Example

html

<span class="icon-message-filled"></span>

.icon-message-invisible

scss

.icon-message-invisible {
  &::before {
    content: '\e95b';
  }
}

Class for use the message-invisible icon

Example

html

<span class="icon-message-invisible"></span>

.icon-message-last

scss

.icon-message-last {
  &::before {
    content: '\e911';
  }
}

Class for use the message-last icon

Example

html

<span class="icon-message-last"></span>

.icon-message-new

scss

.icon-message-new {
  &::before {
    content: '\e962';
  }
}

Class for use the message-new icon

Example

html

<span class="icon-message-new"></span>

.icon-message-not-sent

scss

.icon-message-not-sent {
  &::before {
    content: '\e95c';
  }
}

Class for use the message-not-sent icon

Example

html

<span class="icon-message-not-sent"></span>

.icon-message-received

scss

.icon-message-received {
  &::before {
    content: '\e95d';
  }
}

Class for use the message-received icon

Example

html

<span class="icon-message-received"></span>

.icon-message-resend

scss

.icon-message-resend {
  &::before {
    content: '\e95e';
  }
}

Class for use the message-resend icon

Example

html

<span class="icon-message-resend"></span>

.icon-message-sent

scss

.icon-message-sent {
  &::before {
    content: '\e95f';
  }
}

Class for use the message-sent icon

Example

html

<span class="icon-message-sent"></span>

.icon-message-visible

scss

.icon-message-visible {
  &::before {
    content: '\e960';
  }
}

Class for use the message-visible icon

Example

html

<span class="icon-message-visible"></span>

.icon-minus

scss

.icon-minus {
  &::before {
    content: '\e906';
  }
}

Class for use the minus icon

Example

html

<span class="icon-minus"></span>

.icon-monthly

scss

.icon-monthly {
  &::before {
    content: '\e935';
  }
}

Class for use the monthly icon

Example

html

<span class="icon-monthly"></span>

.icon-notes

scss

.icon-notes {
  &::before {
    content: '\e92a';
  }
}

Class for use the notes icon

Example

html

<span class="icon-notes"></span>

.icon-notification

scss

.icon-notification {
  &::before {
    content: '\e957';
  }
}

Class for use the notification icon

Example

html

<span class="icon-notification"></span>

.icon-outbound

scss

.icon-outbound {
  &::before {
    content: '\e91e';
  }
}

Class for use the outbound icon

Example

html

<span class="icon-outbound"></span>

.icon-plus

scss

.icon-plus {
  &::before {
    content: '\e92e';
  }
}

Class for use the plus icon

Example

html

<span class="icon-plus"></span>

.icon-profile

scss

.icon-profile {
  &::before {
    content: '\e91b';
  }
}

Class for use the profile icon

Example

html

<span class="icon-profile"></span>

.icon-profile-check

scss

.icon-profile-check {
  &::before {
    content: '\e91c';
  }
}

Class for use the profile-check icon

Example

html

<span class="icon-profile-check"></span>

.icon-recharge

scss

.icon-recharge {
  &::before {
    content: '\e927';
  }
}

Class for use the recharge icon

Example

html

<span class="icon-recharge"></span>

.icon-refresh

scss

.icon-refresh {
  &::before {
    content: '\e903';
  }
}

Class for use the refresh icon

Example

html

<span class="icon-refresh"></span>

.icon-reports-sheet

scss

.icon-reports-sheet {
  &::before {
    content: '\e936';
  }
}

Class for use the reports-sheet icon

Example

html

<span class="icon-reports-sheet"></span>

.icon-reports-sheet-check

scss

.icon-reports-sheet-check {
  &::before {
    content: '\e937';
  }
}

Class for use the reports-sheet-check icon

Example

html

<span class="icon-reports-sheet-check"></span>

.icon-reports

scss

.icon-reports {
  &::before {
    content: '\e922';
  }
}

Class for use the reports icon

Example

html

<span class="icon-reports"></span>

.icon-search

scss

.icon-search {
  &::before {
    content: '\e909';
  }
}

Class for use the search icon

Example

html

<span class="icon-search"></span>

.icon-send

scss

.icon-send {
  &::before {
    content: '\e90e';
  }
}

Class for use the send icon

Example

html

<span class="icon-send"></span>

.icon-shop-outbound

scss

.icon-shop-outbound {
  &::before {
    content: '\e92b';
  }
}

Class for use the shop icon

Example

html

<span class="icon-shop"></span>

.icon-sidebar

scss

.icon-sidebar {
  &::before {
    content: '\e928';
  }
}

Class for use the sidebar icon

Example

html

<span class="icon-sidebar"></span>

.icon-social-facebook

scss

.icon-social-facebook {
  &::before {
    content: '\e910';
  }
}

Class for use the social facebook icon

Example

html

<span class="icon-social-facebook"></span>

.icon-social-instagram

scss

.icon-social-instagram {
  &::before {
    content: '\e912';
  }
}

Class for use the social instagram icon

Example

html

<span class="icon-social-instagram"></span>

.icon-social-linkedin

scss

.icon-social-linkedin {
  &::before {
    content: '\e913';
  }
}

Class for use the social linkedin icon

Example

html

<span class="icon-social-linkedin"></span>

.icon-social-patreon

scss

.icon-social-patreon {
  &::before {
    content: '\e914';
  }
}

Class for use the social patreon icon

Example

html

<span class="icon-social-patreon"></span>

.icon-social-tumblr

scss

.icon-social-tumblr {
  &::before {
    content: '\e915';
  }
}

Class for use the social tumblr icon

Example

html

<span class="icon-social-tumblr"></span>

.icon-social-twitch

scss

.icon-social-twitch {
  &::before {
    content: '\e916';
  }
}

Class for use the social twitch icon

Example

html

<span class="icon-social-twitch"></span>

.icon-social-twitter

scss

.icon-social-twitter {
  &::before {
    content: '\e917';
  }
}

Class for use the social twitter icon

Example

html

<span class="icon-social-twitter"></span>

.icon-social-vimeo

scss

.icon-social-vimeo {
  &::before {
    content: '\e918';
  }
}

Class for use the social vimeo icon

Example

html

<span class="icon-social-vimeo"></span>

.icon-social-youtube

scss

.icon-social-youtube {
  &::before {
    content: '\e919';
  }
}

Class for use the social youtube icon

Example

html

<span class="icon-social-youtube"></span>

.icon-star

scss

.icon-star {
  &::before {
    content: '\e90d';
  }
}

Class for use the star icon

Example

html

<span class="icon-star"></span>

.icon-star-filled

scss

.icon-star-filled {
  &::before {
    content: '\e90f';
  }
}

Class for use the star filled icon

Example

html

<span class="icon-star-filled"></span>

.icon-support

scss

.icon-support {
  &::before {
    content: '\e94a';
  }
}

Class for use the support icon

Example

html

<span class="icon-support"></span>

.icon-time

scss

.icon-time {
  &::before {
    content: '\e933';
  }
}

Class for use the time icon

Example

html

<span class="icon-time"></span>

.icon-time-out

scss

.icon-time-out {
  &::before {
    content: '\e930';
  }
}

Class for use the time-out icon

Example

html

<span class="icon-time-out"></span>

.icon-trash

scss

.icon-trash {
  &::before {
    content: '\e93e';
  }
}

Class for use the trash icon

Example

html

<span class="icon-trash"></span>

.icon-typification

scss

.icon-typification {
  &::before {
    content: '\e925';
  }
}

Class for use the typification icon

Example

html

<span class="icon-typification"></span>

.icon-upload-cloud

scss

.icon-upload-cloud {
  &::before {
    content: '\e91a';
  }
}

Class for use the upload cloud icon

Example

html

<span class="icon-upload-cloud"></span>

.icon-user

scss

.icon-user {
  &::before {
    content: '\e93c';
  }
}

Class for use the user icon

Example

html

<span class="icon-user"></span>

.icon-user-filled

scss

.icon-user-filled {
  &::before {
    content: '\e944';
  }
}

Class for use the user-filled icon

Example

html

<span class="icon-user-filled"></span>

.icon-weekly

scss

.icon-weekly {
  &::before {
    content: '\e938';
  }
}

Class for use the weekly icon

Example

html

<span class="icon-weekly"></span>

.icon-whispering

scss

.icon-whispering {
  &::before {
    content: '\e959';
  }
}

Class for use the whispering icon

Example

html

<span class="icon-whispering"></span>