Skip to content

Instantly share code, notes, and snippets.



Last active Feb 17, 2016
What would you like to do?
icon-map & iconify mixin
// ----
// libsass (v3.1.0)
// ----
@import "bourbon/bourbon";
$icon-family-name: 'icons' !default;
$icon-prefix: 'icon' !default;
$icon-set-map: (
bullet: '\e001',
chevron-down: '\e002',
chevron-large: '\e003',
chevron-left: '\e004',
chevron-right: '\e005',
chevron-up: '\e006',
close: '\e007',
cog: '\e008',
exclamation: '\e00a',
google-dev: '\e00b',
hash: '\e00c',
introduction-to-media: '\e00d',
lessons: '\e00e',
menu: '\e00f',
minus: '\e010',
multi-device-layouts: '\e011',
performance: '\e012',
plus: '\e013',
question: '\e014',
slash: '\e015',
star: '\e016',
tick: '\e017',
user-input: '\e018',
twitter: '\e800',
github: '\e801',
facebook: '\e802',
gplus: '\e803',
folder-open: '\e804',
rss: '\e805',
html5: '\e806',
phone: '\e807',
folder: '\e808',
address: '\e809',
email: '\e80a',
globe: '\e80b',
user: '\e80c',
calendar: '\e80d',
search: '\e80e',
resize-full: '\e80f',
chat: '\e810',
tag: '\e811',
chevron-double-right: '\e812',
quotation-mark-right: '\e813',
basket: '\e814',
filter: '\e815',
/* # Icon set
Styleguide components.icons.icon-set
@mixin icon-set-init($icon-set-map: null){
@if $icon-set-map{
@each $name, $code in $icon-set-map{
@error "Vous n'avez pas fourni de icon-map";
@include icon-set-init($icon-set-map);
/* # @mixin iconify
<a href="" class="btn test-btn">Link Text</a>
@mixin iconify
@param $icon {string} - icon name
@param $position [before !default, after] - Position of the icon
@param $margin (5px default) - Si avant ou après le contenu, il est possible de gérer l'espace
@param $replace {boolean} (false !default) - Remplace le contenu
@see - Inspiré de <>
$icon-family-name ('icons' !default) - Nom de l'icon font ex:`font-awesome, icomoon`
$icon-prefix ('icon' !default) - Prefix des classes css sans le tiret ex:`icn, icone, icon`
Styleguide components.icons.icon-utils
@mixin iconify($icon, $position: "before", $margin: 5px, $replace: false) {
// on récupère l'icone dans la maps icon-set
@if map-has-key($icon-set-map,$icon){
// If we're replacing the text, set font-size to 0
@if $replace {
font-size: 0;
// Pseudo-element properties
&:#{$position} {
/*@extend .#{$icon-prefix}-#{$icon};*/
content: map-get($icon-set-map,$icon);
font-family: #{$icon-family-name};
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
@if $replace==false{
@if $position=="before"{
margin-right: $margin;
@if $position=="after"{
margin-left: $margin;
@if $replace {
font-size: 1rem;
}@else {
@error '@mixin Iconify : Impossible de trouver l\'icone '+$icon ;
.test-btn {
// Visually replace the contents of the element with the search icon
@include iconify("email", "after", 15px) {
font-size: 20px;

This comment has been minimized.

Copy link

@Turqueso Turqueso commented Jul 15, 2015

is bourbon necessary?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment