Icon

<div>
    <p><i class="icon icon-info"></i> Check http://app.fontastic.me/#customize/AiqMQEnybHD8PBE9PTcC4V</p>
    <img class="arrow-right" src="../../assets/arrow-long-right-red.svg">
    <img class="arrow-right" src="../../assets/arrow-long-right-blue.svg">
    <img class="arrow-right" src="../../assets/arrow-long-right-white.svg">
</div>
<div>
    <p><i class="icon icon-info"></i> Check http://app.fontastic.me/#customize/AiqMQEnybHD8PBE9PTcC4V</p>
    <img class="arrow-right" src={context.app.uri('assets/arrow-long-right-red.svg')} />
    <img class="arrow-right" src={context.app.uri('assets/arrow-long-right-blue.svg')} />
    <img class="arrow-right" src={context.app.uri('assets/arrow-long-right-white.svg')} />
</div>
/* No context defined for this component. */
  • Content:
    %icon,
    .icon {
      position: relative;
      top: 2px;
      text-transform: none;
      line-height: 1;
      font-family: 'icons';
      font-size: .8em;
      font-weight: normal;
      font-style: normal;
      font-variant: normal;
      speak: none;
      // sass-lint:disable no-vendor-prefixes
      -webkit-text-stroke-width: 1px;
    
      // Better Font Rendering
      // sass-lint:disable no-vendor-prefixes
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    // Adds support for embedded svg icons
    icon {
      svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
      }
    }
    
    .icon--big {
      width: $spacer-xl;
      height: $spacer-xl;
    }
    
    // sass-lint:disable pseudo-element, empty-line-between-blocks
    
    .icon-search {
      &:before {
        content: $icon-search;
      }
    }
    .icon-arrow-down {
      &:before {
        content: $icon-arrow-down;
      }
    }
    .icon-chevron-down {
      &:before {
        content: $icon-chevron-down;
      }
    }
    .icon-chevron-up {
      &:before {
        content: $icon-chevron-up;
      }
    }
    .icon-chevron-right {
      &:before {
        content: $icon-chevron-right;
      }
    }
    .icon-chevron-left {
      &:before {
        content: $icon-chevron-left;
      }
    }
    .icon-return {
      &:before {
        content: $icon-return;
      }
    }
    .icon-check {
      &:before {
        content: $icon-check;
      }
    }
    .icon-close {
      &:before {
        content: $icon-close;
      }
    }
    .icon-download {
      &:before {
        content: $icon-download;
      }
    }
    .icon-facebook {
      &:before {
        content: $icon-facebook;
      }
    }
    .icon-twitter {
      &:before {
        content: $icon-twitter;
      }
    }
    .icon-bubble-conversation-4 {
      &:before {
        content: $icon-bubble-conversation-4;
      }
    }
    .icon-info {
      &:before {
        content: $icon-info;
      }
    }
    .icon-itunes {
      &:before {
        content: $icon-itunes;
      }
    }
    .icon-email {
      &:before {
        content: $icon-email;
      }
    }
    .icon-phone {
      &:before {
        content: $icon-phone;
      }
    }
    .icon-rss {
      &:before {
        content: $icon-rss;
      }
    }
    .icon-location {
      &:before {
        content: $icon-location;
      }
    }
    .icon-text {
      &:before {
        content: $icon-text;
      }
    }
    .icon-chevron-2-down {
      &:before {
        content: $icon-chevron-2-down;
      }
    }
    .icon-chevron-2-left {
      &:before {
        content: $icon-chevron-2-left;
      }
    }
    .icon-chevron-2-right {
      &:before {
        content: $icon-chevron-2-right;
      }
    }
    .icon-chevron-2-up {
      &:before {
        content: $icon-chevron-2-up;
      }
    }
    .icon-location-filled {
      &:before {
        content: $icon-location-filled;
      }
    }
    .icon-xing {
      &:before {
        content: $icon-xing;
      }
    }
    .icon-linkedin {
      &:before {
        content: $icon-linkedin;
      }
    }
    .icon-rss-1 {
      &:before {
        content: $icon-rss-1;
      }
    }
    
    //Arrows
    .arrow-right {
      position: relative;
      top: .1em;
      margin-left: $spacer-xs;
    }
    
  • URL: /components/raw/icon/_icon.scss
  • Filesystem Path: components/01-atoms/media/icon/_icon.scss
  • Size: 2.6 KB

There are no notes for this item.