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
You can’t perform that action at this time.