Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--

Super semantic multicolor font icons in pure CSS!

-->


<p>The <span data-icon="l"></span> asked the
  <span data-icon="v"></span> "Where did
  <span data-icon="o"></span> and
  <span data-icon="p"></span> fly off to?"</p>



<div>Super semantic multicolor font icons in pure CSS by <a href="http://pixelambacht.nl/2014/multicolor-icons/" target="_blank">Pixelambacht</a>. Icon design by the awesome <a href="http://cargocollective.com/skwirrol/">Eva Galesloot</a>!</div>

              
            
!

CSS

              
                [data-icon] {
  font-family: "Skwirrol-Icons"; /* See @font-face declarations at bottom */
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: inline-block; /* So we can set its width */
  white-space: pre;      /* Turn newlines into actual newlines */
  letter-spacing: -1em;  /* Overlap icons horizontally */
  line-height: 0;        /* Overlap icons vertically */
  padding: 0.5em 0;      /* Compensate for zero line height */
  width: 1em;            /* Compensate for negative letter spacing */

  font-weight: 300;      /* Weight for third layer */
}
[data-icon]:before {
  /* Insert the three first layers */
  content: attr(data-icon)
           attr(data-icon) "\a"
           attr(data-icon);
}
[data-icon]:first-letter {
  font-weight: 100;      /* Weight for the first layer */
}
[data-icon]:first-line {
  font-weight: 200;      /* Weight for the second layer */
}
[data-icon]:after {
  /* Insert the last layer */
  content: attr(data-icon);
  font-weight: 400;      /* Weight for the fourth layer */
}

/* Colors for Skwirrol's lion */
[data-icon="l"] {
  color: #ffef9f;
}
[data-icon="l"]:first-line {
  color: #ffde3f;
}
[data-icon="l"]:first-letter {
  color: #de6d36;
}
[data-icon="l"]:after {
  color: #000;
}

/* Colors for Skwirrol's owl */
[data-icon="o"] {
  color: #7a6155;
}
[data-icon="o"]:first-line {
  color: #3c2313;
}
[data-icon="o"]:first-letter {
  color: #593a2a;
}
[data-icon="o"]:after {
  color: #fcb040;
}

/* Colors for Skwirrol's whale */
[data-icon="v"] {
  color: #41a1c1;
}
[data-icon="v"]:first-line {
  color: #c5deeb;
}
[data-icon="v"]:first-letter {
  color: #4ebfe5;
}
[data-icon="v"]:after {
  color: #c1417e;
}

/* Colors for Skwirrol's parrot */
[data-icon="p"] {
  color: #fcb040;
}
[data-icon="p"]:first-line {
  color: #4d7125;
}
[data-icon="p"]:first-letter {
  color: #8ebf48;
}
[data-icon="p"]:after {
  color: #f7953d;
}

@font-face {
  /* Skwirrol Solid */
  font-family: 'Skwirrol-Icons';
  src:url(data:application/x-font-woff;base64,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) format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  /* Skwirrol Color 1 */
  font-family: 'Skwirrol-Icons';
  src:url(data:application/x-font-woff;base64,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) format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  /* Skwirrol Color 2 */
  font-family: 'Skwirrol-Icons';
  src:url(data:application/x-font-woff;base64,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) format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  /* Skwirrol Color 3 */
  font-family: 'Skwirrol-Icons';
  src:url(data:application/x-font-woff;base64,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) format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  text-align: center;
}
p {
  font-size: 5em;1  margin: 0.25em 20%;
}
div {
  font-size: 1em;
}
              
            
!

JS

              
                
              
            
!
999px

Console