Skip to content

Instantly share code, notes, and snippets.

@bernbecht
Created March 9, 2016 01:32
Show Gist options
  • Save bernbecht/2657601a02da6d668286 to your computer and use it in GitHub Desktop.
Save bernbecht/2657601a02da6d668286 to your computer and use it in GitHub Desktop.
Creating many classes for font-icons using SCSS
@font-face {
font-family: 'icomoon';
src: url('../font/font-icons.eot');
src: url('../font/font-icons.eot#iefix') format('embedded-opentype'),
url('../font/font-icons.woff') format('woff'),
url('../font/font-icons.ttf') format('truetype'),
url('../font/font-icons.svg#font-icons') format('svg');
font-weight: normal;
font-style: normal;
}
$ui-icons-font-family: "icomoon" !default;
$ui-icons-prefix: ui-icon- !default;
%ion {
display: inline-block;
font-family: $ui-icons-font-family;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
$icon-map: (
new-error: "\e671",
new-check: "\e670",
new-detail: "\e66d",
percent-down: "\e66e",
percent-up: "\e66f",
points-program: "\e66c",
profitability: "\e669",
money-bag: "\e66a",
pfm-graphic: "\e66b",
negative-money: "\e667",
positive-money: "\e668",
arrow-ahead: "\e665",
arrow-back: "\e666",
new-alert-outline: "\e663",
new-attention: "\e664",
eye: "\e660",
pfm-user-outline: "\e661",
pfm-user: "\e662",
ahead: "\e65f",
pay-lock: "\e636",
plan: "\e65e",
home: "\e635",
backspace: "\e600",
account: "\e601",
alert: "\e602",
alert-outline: "\e603",
all: "\e604",
attend: "\e605",
attendment: "\e606",
attention: "\e607",
back: "\e608",
billet: "\e609",
pin: "\e60a",
boxinfo-error: "\e60b",
boxinfo-success: "\e60c",
brazil: "\e60d",
card: "\e60e",
cell-lock: "\e60f",
certificad-lock: "\e610",
checkbook: "\e611",
club: "\e612",
collecting-checks: "\e613",
createplanningpfm: "\e614",
credcard-lock: "\e615",
creditcard: "\e616",
deposit: "\e617",
detail: "\e618",
doc: "\e619",
doubts: "\e61a",
earth: "\e61b",
edit: "\e61c",
error: "\e61d",
eua: "\e61e",
expand: "\e61f",
expandup: "\e620",
fare: "\e621",
filter: "\e622",
folder: "\e623",
follow-requests: "\e624",
glossary: "\e625",
graphic: "\e626",
hand-arrow: "\e627",
image-lock: "\e628",
info: "\e629",
investment: "\e62a",
key: "\e62b",
less: "\e62c",
list: "\e62d",
loan: "\e62e",
atm: "\e62f",
lock: "\e630",
login-lock: "\e631",
mail-radius: "\e632",
mail: "\e633",
management: "\e634",
more: "\e637",
new-comment: "\e638",
close: "\e639",
ok: "\e63a",
check-ok: "\e63b",
oldphone: "\e63c",
oldphone-black: "\e63d",
open-account: "\e63e",
payment: "\e63f",
payment-voucher: "\e65c",
payment-scheduling-voucher: "\e652",
pc-lock: "\e640",
pc-value: "\e641",
pdf: "\e642",
pfm: "\e643",
photo: "\e644",
pin-map: "\e645",
planner: "\e646",
print: "\e647",
privacy: "\e648",
refresh: "\e649",
request-checkbook: "\e64a",
saq: "\e64b",
search-lock: "\e64c",
search: "\e64d",
serve-foreign-currency: "\e64e",
serve-real: "\e64f",
settings: "\e650",
signe: "\e651",
small-calendar: "\e652",
time: "\e653",
token: "\e654",
transfer: "\e655",
trash: "\e656",
travel: "\e657",
valid: "\e658",
value: "\e659",
viewgraphicpfm: "\e65a",
viewtransactions: "\e65b",
viewvoucher: "\e65c",
x: "\e65d"
);
@each $name, $icon in $icon-map {
.#{$ui-icons-prefix}#{$name}:before {
content: $icon;
@extend %ion;
}
}
$icon-edit: "\e61c";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment