Skip to content

Instantly share code, notes, and snippets.

@cfarm
Created July 7, 2015 20:51
Show Gist options
  • Save cfarm/e235bfceb8a45a644577 to your computer and use it in GitHub Desktop.
Save cfarm/e235bfceb8a45a644577 to your computer and use it in GitHub Desktop.
cf-icon-menu
/* ==========================================================================
Capital Framework
Icons
========================================================================== */
/* topdoc
name: Less variables
family: cf-icons
notes:
- "These variables can be overriden in your project's Less file."
patterns:
- name: CSS prefix
codenotes:
- "@cf-icon-prefix: cf-icon;"
- name: Path to icon font files
codenotes:
- "@cf-icon-path: '../fonts';"
- name: Toggle IE7 support
codenotes:
- "@cf-icon-ie7-support: true;"
notes:
- "More on IE7 support can be found in the 'IE7 Support' section."
tags:
- cf-icons
*/
/* topdoc
name: IE7 Support
family: cf-icons
notes:
- "IE7 support is added by using dynamic properties (CSS expressions)."
- "To turn off IE7 support simply set @cf-icon-ie7-support to false."
tags:
- cf-icons
*/
/* topdoc
name: The basics
family: cf-icons
patterns:
- name: "@font-face declaration"
- name: Base icon class
notes:
- "The cf-icon-prefix class applies all shared icon styles including the
font family."
- "All icons must use two classes, one for this base class and another
to set the font character. For example:
<span class='cf-icon cf-icon-left'></span>."
- "Please use the span element instead of the i element. This avoids
font family cascading conflicts when using an italic webfont on i
elements and then another font for the icons. Note that this issue
only pops up in older versions of Internet Explorer."
tags:
- cf-icons
*/
@font-face {
font-family: 'CFPB Minicons';
src: url('../fonts/cf-icons.eot');
src: url('../fonts/cf-icons.eot?#iefix') format('embedded-opentype'), url('../fonts/cf-icons.woff') format('woff'), url('../fonts/cf-icons.ttf') format('truetype'), url('../fonts/cf-icons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.cf-icon {
font-family: 'CFPB Minicons';
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.cf-icon-menu:before {
content: "\e630";
}
.lt-ie8 .cf-icon-menu {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e630');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment