unicode_icons Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<h2>Icon</h2>
<spân class="icon-add" aria-hidden="true"></span>

<h2>Buttons</h2>

<a class="button" href="#">Simple button</a>
<a class="button icon-add" href="#">Add</a>
<a class="button icon-edit" href="#">Edit</a>
<a class="button icon-delete" href="#">Delete</a>
<a class="button icon-save" href="#">Save</a>
<a class="button icon-yingyang" href="#">Yin Yang</a>
<a class="button icon-trigram" href="#">Trigram</a>

<h2>Emoji</h2>
<a class="button icon-white_smiling_face" href="#">White smiling face</a>
<a class="button icon-white_frowning_face" href="#">white_frowning_face</a>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

/* Unicode Icons

Pour éviter d'utiliser une icon-font et donc une requète,
poid supplémentaire, on peut envisager d'utiliser les signes inclus
dans les tables unicode des typos du système du périphérique consultant la page

On notera cependant que tout n'est pas rendu de manière identique : par exemple certaines emoticons sont rendus par défaut via le navigateur,
et forcer une typo ne changera rien a l'apparence.

L'article écrit par FilamentGroup, décrit ce problème et fait un tour d'horizon des fallback a prévoire dans l'utilisation d'icones
unicodes , sprites ou icon-font.

http://unicode-table.com/en/
http://www.paulund.co.uk/playground/demo/css_button_icons_no_images/

http://apps.timwhitlock.info/emoji/tables/unicode

https://www.smashingmagazine.com/2014/05/unicode-for-a-multi-device-world/
https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

 


*/
$icon-set: (
	add: '\271A',
	edit: '\270E',
	delete: '\2718',
	save: '\2714',
	email: '\2709',
	cross: '\2716',
	dollar: '\0024',
	euro: '\20AC',
	pound: '\00A3',
	cent: '\20B5',
	celsius: '\2103',
	fahrenheit: '\2109',
	pi: '\213C',
	one_thrid: '\2153',
	two_thrid: '\2154',
	one_fifth: '\2155',
	two_fifth: '\2156',
	three_fifth: '\2157',
	four_fifth: '\2158',
	one_sixth: '\2159',
	five_sixth: '\215A',
	one_eighth: '\215B',
	three_eighth: '\215C',
	five_eighth: '\215D',
	seven_eighth: '\215E',
	quarter: '\00BC',
	half: '\00BD',
	three_quarter: '\00BE',
	next: '\279C',
	left_arrow: '\2190',
	up_arrow: '\2191',
	right_arrow: '\2192',
	down_arrow: '\2193',
	up_left_arrow: '\2196',
	up_right_arrow: '\2197',
	down_left_arrow: '\2199',
	down_right_arrow: '\2198',
	like: '\2764',
	star: '\2605',
	spark: '\2737',
	play: '\25B6',
	blacksun: '\2600',
	cloud: '\2601',
	umbrella: '\2602',
	snowman: '\2603',
	blackstar: '\2605',
	whitestar: '\2606',
	blackphone: '\260E',
	saltire: '\2613',
	hot_drink: '\2615',
	skull: '\2620',
	radioactive: '\2622',
	biohazard: '\2623',
	peace: '\262E',
	yingyang: '\262F',
	trigram:'\2630',
	frowning_face: '\2639',
	smiling_face: '\263A',
	first_quarter_moon: '\263D',
	last_quarter_moon: '\263E',
	wheelchair: '\267F',
	recycle: '\267D',
	recycle2: '\267C',
	music_note: '\266C',
	warning: '\26A0',
	male_and_female: '\26A4',
	scissors: '\2701',
	airplane: '\2708',
	snow: '\2042',
	// Emoji
	white_smiling_face: '\263A',
	white_frowning_face:'\2639'
);

/* # Icon set
http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/
http://frontendgods.com/sass-mixins-with-default-parameters-using-maps/
Styleguide components.icons.icon-set
*/
@mixin icon-set-init($icon-set-map: null){
  @if $icon-set-map{
    @each $name, $code in $icon-set-map{
      .icon-#{$name}:before{
        content:$code;
      }
    }
  }
  @else{
    @error "Vous n'avez pas fourni de icon-map";
  }
}

@include icon-set-init($icon-set);

.button {
  display: inline-block;
  background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
  border: 1px solid #a1a1a1;
  padding: 0 2em;
  margin: 0.5em;
  font: bold 1em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  border-radius: .2em;
}

.button:before{
  float: left;
  width: 1em;
  text-align: center;
  font-size: 1.7em;
  margin: 0 0.5em 0 -1em;
  padding: 0 .2em;
  pointer-events: none;
}

SassMeister-output.css

@charset "UTF-8";
/* Unicode Icons

Pour éviter d'utiliser une icon-font et donc une requète,
poid supplémentaire, on peut envisager d'utiliser les signes inclus
dans les tables unicode des typos du système du périphérique consultant la page

On notera cependant que tout n'est pas rendu de manière identique : par exemple certaines emoticons sont rendus par défaut via le navigateur,
et forcer une typo ne changera rien a l'apparence.

L'article écrit par FilamentGroup, décrit ce problème et fait un tour d'horizon des fallback a prévoire dans l'utilisation d'icones
unicodes , sprites ou icon-font.

http://unicode-table.com/en/
http://www.paulund.co.uk/playground/demo/css_button_icons_no_images/

http://apps.timwhitlock.info/emoji/tables/unicode

https://www.smashingmagazine.com/2014/05/unicode-for-a-multi-device-world/
https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

 


*/
/* # Icon set
http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/
http://frontendgods.com/sass-mixins-with-default-parameters-using-maps/
Styleguide components.icons.icon-set
*/
.icon-add:before {
  content: "✚";
}

.icon-edit:before {
  content: "✎";
}

.icon-delete:before {
  content: "✘";
}

.icon-save:before {
  content: "✔";
}

.icon-email:before {
  content: "✉";
}

.icon-cross:before {
  content: "✖";
}

.icon-dollar:before {
  content: "$";
}

.icon-euro:before {
  content: "€";
}

.icon-pound:before {
  content: "£";
}

.icon-cent:before {
  content: "₵";
}

.icon-celsius:before {
  content: "℃";
}

.icon-fahrenheit:before {
  content: "℉";
}

.icon-pi:before {
  content: "ℼ";
}

.icon-one_thrid:before {
  content: "⅓";
}

.icon-two_thrid:before {
  content: "⅔";
}

.icon-one_fifth:before {
  content: "⅕";
}

.icon-two_fifth:before {
  content: "⅖";
}

.icon-three_fifth:before {
  content: "⅗";
}

.icon-four_fifth:before {
  content: "⅘";
}

.icon-one_sixth:before {
  content: "⅙";
}

.icon-five_sixth:before {
  content: "⅚";
}

.icon-one_eighth:before {
  content: "⅛";
}

.icon-three_eighth:before {
  content: "⅜";
}

.icon-five_eighth:before {
  content: "⅝";
}

.icon-seven_eighth:before {
  content: "⅞";
}

.icon-quarter:before {
  content: "¼";
}

.icon-half:before {
  content: "½";
}

.icon-three_quarter:before {
  content: "¾";
}

.icon-next:before {
  content: "➜";
}

.icon-left_arrow:before {
  content: "←";
}

.icon-up_arrow:before {
  content: "↑";
}

.icon-right_arrow:before {
  content: "→";
}

.icon-down_arrow:before {
  content: "↓";
}

.icon-up_left_arrow:before {
  content: "↖";
}

.icon-up_right_arrow:before {
  content: "↗";
}

.icon-down_left_arrow:before {
  content: "↙";
}

.icon-down_right_arrow:before {
  content: "↘";
}

.icon-like:before {
  content: "❤";
}

.icon-star:before {
  content: "★";
}

.icon-spark:before {
  content: "✷";
}

.icon-play:before {
  content: "▶";
}

.icon-blacksun:before {
  content: "☀";
}

.icon-cloud:before {
  content: "☁";
}

.icon-umbrella:before {
  content: "☂";
}

.icon-snowman:before {
  content: "☃";
}

.icon-blackstar:before {
  content: "★";
}

.icon-whitestar:before {
  content: "☆";
}

.icon-blackphone:before {
  content: "☎";
}

.icon-saltire:before {
  content: "☓";
}

.icon-hot_drink:before {
  content: "☕";
}

.icon-skull:before {
  content: "☠";
}

.icon-radioactive:before {
  content: "☢";
}

.icon-biohazard:before {
  content: "☣";
}

.icon-peace:before {
  content: "☮";
}

.icon-yingyang:before {
  content: "☯";
}

.icon-trigram:before {
  content: "☰";
}

.icon-frowning_face:before {
  content: "☹";
}

.icon-smiling_face:before {
  content: "☺";
}

.icon-first_quarter_moon:before {
  content: "☽";
}

.icon-last_quarter_moon:before {
  content: "☾";
}

.icon-wheelchair:before {
  content: "♿";
}

.icon-recycle:before {
  content: "♽";
}

.icon-recycle2:before {
  content: "♼";
}

.icon-music_note:before {
  content: "♬";
}

.icon-warning:before {
  content: "⚠";
}

.icon-male_and_female:before {
  content: "⚤";
}

.icon-scissors:before {
  content: "✁";
}

.icon-airplane:before {
  content: "✈";
}

.icon-snow:before {
  content: "⁂";
}

.icon-white_smiling_face:before {
  content: "☺";
}

.icon-white_frowning_face:before {
  content: "☹";
}

.button {
  display: inline-block;
  background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
  background: linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
  /* W3C */
  border: 1px solid #a1a1a1;
  padding: 0 2em;
  margin: 0.5em;
  font: bold 1em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  border-radius: .2em;
}

.button:before {
  float: left;
  width: 1em;
  text-align: center;
  font-size: 1.7em;
  margin: 0 0.5em 0 -1em;
  padding: 0 .2em;
  pointer-events: none;
}

SassMeister-rendered.html

<h2>Icon</h2>
<spân class="icon-add" aria-hidden="true"></span>

<h2>Buttons</h2>

<a class="button" href="#">Simple button</a>
<a class="button icon-add" href="#">Add</a>
<a class="button icon-edit" href="#">Edit</a>
<a class="button icon-delete" href="#">Delete</a>
<a class="button icon-save" href="#">Save</a>
<a class="button icon-yingyang" href="#">Yin Yang</a>
<a class="button icon-trigram" href="#">Trigram</a>

<h2>Emoji</h2>
<a class="button icon-white_smiling_face" href="#">White smiling face</a>
<a class="button icon-white_frowning_face" href="#">white_frowning_face</a>