Fractal Starter
Project version : 0.1.2

Icons 

<div class="icons-listing">
    <div class="icons">
        <i class="icon icon--search"></i>
        <span>icon--search</span>
    </div>

    <div class="icons">
        <i class="icon icon--pencil"></i>
        <span>icon--pencil</span>
    </div>

    <div class="icons">
        <i class="icon icon--menu"></i>
        <span>icon--menu</span>
    </div>

    <div class="icons">
        <i class="icon icon--chevron-down"></i>
        <span>icon--chevron-down</span>
    </div>
</div>
 
<div class="icons-listing">
   <div class="icons">
      <i class="icon icon--search"></i>
      <span>icon--search</span>
   </div>

   <div class="icons">
      <i class="icon icon--pencil"></i>
      <span>icon--pencil</span>
   </div>

   <div class="icons">
      <i class="icon icon--menu"></i>
      <span>icon--menu</span>
   </div>

   <div class="icons">
      <i class="icon icon--chevron-down"></i>
      <span>icon--chevron-down</span>
   </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .icon {
   display: inline-block;
   width: 20px;
   height: 20px;
   vertical-align: middle;

   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

   &--search {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='search' class='svg-inline--fa fa-search fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23EED57D' d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");

      &-black {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='search' class='svg-inline--fa fa-search fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");
      }
   }

   &--devis {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='question-circle' class='svg-inline--fa fa-question-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23EED57D' d='M256 340a28 28 0 100 56 28 28 0 000-56zm7.7-24h-16a12 12 0 01-12-12v-.4c0-70.3 77.4-63.6 77.4-107.4 0-20-17.8-40.2-57.4-40.2-29.2 0-44.3 9.6-59.2 28.7-4 5-11 6-16.3 2.4l-13.1-9.2a12 12 0 01-2.7-17.2c21.3-27.2 46.4-44.7 91.3-44.7 52.3 0 97.4 29.8 97.4 80.2 0 67.4-77.4 63.9-77.4 107.4v.4a12 12 0 01-12 12zM256 40a216 216 0 110 432 216 216 0 010-432m0-32a248 248 0 100 496 248 248 0 000-496z'/%3E%3C/svg%3E");
   }

   &--pencil {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='pen-alt' class='svg-inline--fa fa-pen-alt fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M493.25 56.26l-37.51-37.51C443.24 6.25 426.86 0 410.49 0c-16.38 0-32.76 6.25-45.25 18.74l-67.88 67.88L274.74 64c-12.5-12.5-32.76-12.5-45.25 0L99.37 194.12c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0L252.1 86.63l22.62 22.62L93.95 290.03A327.038 327.038 0 0 0 .17 485.12l-.03.23C-1.45 499.72 9.88 512 23.95 512c5.73 0 111.06-6.99 198.03-93.95l271.28-271.28c24.99-25 24.99-65.52-.01-90.51zm-293.9 339.16c-45 45-103.93 74.41-166.1 83.39 9.13-62.64 38.5-121.32 83.34-166.16l180.77-180.77.01.01.01-.01 82.76 82.76-180.79 180.78zm271.28-271.28l-67.88 67.88-82.77-82.77 67.88-67.88c12.5-12.5 32.74-12.51 45.25 0l37.51 37.51c12.51 12.5 12.52 32.74.01 45.26z'/%3E%3C/svg%3E");

      @include mediaWQuery($media-query-s) {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='pen-alt' class='svg-inline--fa fa-pen-alt fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23EED57D' d='M493.25 56.26l-37.51-37.51C443.24 6.25 426.86 0 410.49 0c-16.38 0-32.76 6.25-45.25 18.74l-67.88 67.88L274.74 64c-12.5-12.5-32.76-12.5-45.25 0L99.37 194.12c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0L252.1 86.63l22.62 22.62L93.95 290.03A327.038 327.038 0 0 0 .17 485.12l-.03.23C-1.45 499.72 9.88 512 23.95 512c5.73 0 111.06-6.99 198.03-93.95l271.28-271.28c24.99-25 24.99-65.52-.01-90.51zm-293.9 339.16c-45 45-103.93 74.41-166.1 83.39 9.13-62.64 38.5-121.32 83.34-166.16l180.77-180.77.01.01.01-.01 82.76 82.76-180.79 180.78zm271.28-271.28l-67.88 67.88-82.77-82.77 67.88-67.88c12.5-12.5 32.74-12.51 45.25 0l37.51 37.51c12.51 12.5 12.52 32.74.01 45.26z'/%3E%3C/svg%3E");
      }
   }

   &--menu {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='bars' class='svg-inline--fa fa-bars fa-w-14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E %3Cdefs%3E %3ClinearGradient id='gradientSvg' %3E %3Cstop offset='0%25' style='stop-color:%23E3CB78'/%3E %3Cstop offset='100%25' style='stop-color:%23A07C2A'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath fill='url(%23gradientSvg)' d='M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z'/%3E %3C/svg%3E");
   }

   &--chevron-down {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23A79360' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
   }

   &--chevron-right {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-right' class='svg-inline--fa fa-chevron-right fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23BDA450' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
   }

   &--chevron-left {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-left' class='svg-inline--fa fa-chevron-left fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23BDA450' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'/%3E%3C/svg%3E");
   }

   &--close {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='times' class='svg-inline--fa fa-times fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23000' d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");

      &--white {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='times' class='svg-inline--fa fa-times fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");
      }
   }
}
  • URL: /components/raw/icons/icons.scss
  • Filesystem Path: components/04-elements/10-icons/01-icons/icons.scss
  • Size: 8 KB

There are no notes for this item.