Skip to content
Snippets Groups Projects
Commit 59d7a294 authored by xaralis's avatar xaralis
Browse files

Add icomoon fontset

parent 46776826
No related branches found
No related tags found
No related merge requests found
Pipeline #833 passed
[class^="ico--"]:before,
[class*=" ico--"]:before,
[class^="ico--"]:hover:before,
[class*=" ico--"]:hover:before {
@apply no-underline;
}
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-family: sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
width: 15em;
padding-bottom: 1em;
margin-right: 4em;
margin-bottom: 1em;
float: left;
overflow: hidden;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc1 {
color: #999;
}
.fgc0 {
color: #000;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.mls {
margin-left: .25em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
#testDrive {
display: block;
padding-top: 24px;
line-height: 1.5;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 32px;
}
.fs2 {
font-size: 32px;
}
.fs3 {
font-size: 32px;
}
.fs4 {
font-size: 24px;
}
.fs5 {
font-size: 20px;
}
.fs6 {
font-size: 28px;
}
if (!('boxShadow' in document.body.style)) {
document.body.setAttribute('class', 'noBoxShadow');
}
document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT" &&
target.getAttribute('class').indexOf('liga') === -1) {
target.select();
}
});
(function() {
var fontSize = document.getElementById('fontSize'),
testDrive = document.getElementById('testDrive'),
testText = document.getElementById('testText');
function updateTest() {
testDrive.innerHTML = testText.value || String.fromCharCode(160);
if (window.icomoonLiga) {
window.icomoonLiga(testDrive);
}
}
function updateSize() {
testDrive.style.fontSize = fontSize.value + 'px';
}
fontSize.addEventListener('change', updateSize, false);
testText.addEventListener('input', updateTest, false);
testText.addEventListener('change', updateTest, false);
updateSize();
}());
This diff is collapsed.
File added
This diff is collapsed.
File added
File added
This diff is collapsed.
@font-face {
font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?33ujui');
src: url('../fonts/pirati-ui.eot?33ujui#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?33ujui') format('truetype'),
url('../fonts/pirati-ui.woff?33ujui') format('woff'),
url('../fonts/pirati-ui.svg?33ujui#pirati-ui') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="ico--"], [class*=" ico--"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'pirati-ui' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico--strategy:before {
content: "\e932";
}
.ico--pig:before {
content: "\e928";
}
.ico--thermometer:before {
content: "\e90a";
}
.ico--pirati:before {
content: "\e90d";
}
.ico--stackshare:before {
content: "\e90f";
}
.ico--open-source:before {
content: "\e90e";
}
.ico--search:before {
content: "\e913";
}
.ico--bubbles:before {
content: "\e930";
}
.ico--map:before {
content: "\e914";
}
.ico--compass:before {
content: "\e915";
}
.ico--folder-open:before {
content: "\e916";
}
.ico--folder:before {
content: "\e917";
}
.ico--drawer:before {
content: "\e918";
}
.ico--stop:before {
content: "\e919";
}
.ico--github:before {
content: "\e91a";
}
.ico--clock:before {
content: "\e91b";
}
.ico--calendar:before {
content: "\e91c";
}
.ico--flickr:before {
content: "\e91d";
}
.ico--instagram:before {
content: "\e91e";
}
.ico--twitter:before {
content: "\e91f";
}
.ico--newspaper:before {
content: "\e920";
}
.ico--cart:before {
content: "\e921";
}
.ico--home:before {
content: "\e922";
}
.ico--link:before {
content: "\e912";
}
.ico--power:before {
content: "\e90c";
}
.ico--location:before {
content: "\e906";
}
.ico--phone:before {
content: "\e907";
}
.ico--linkedin:before {
content: "\e903";
}
.ico--github1:before {
content: "\e904";
}
.ico--gplus:before {
content: "\e900";
}
.ico--twitter1:before {
content: "\e901";
}
.ico--facebook:before {
content: "\e902";
}
.ico--menu:before {
content: "\e933";
}
.ico--chevron-right:before {
content: "\e923";
}
.ico--chevron-left:before {
content: "\e924";
}
.ico--chevron-down:before {
content: "\e925";
}
.ico--chevron-up:before {
content: "\e926";
}
.ico--zoom_out_map:before {
content: "\e927";
}
.ico--arrow-down:before {
content: "\e911";
}
.ico--link1:before {
content: "\e910";
}
.ico--city:before {
content: "\e908";
}
.ico--beer:before {
content: "\e909";
}
.ico--edit-pencil:before {
content: "\e929";
}
.ico--at:before {
content: "\e905";
}
.ico--calculator:before {
content: "\e931";
}
.ico--bank:before {
content: "\e92a";
}
.ico--facebook-official:before {
content: "\e92b";
}
.ico--close:before {
content: "\e92c";
}
.ico--anchor:before {
content: "\e92d";
}
.ico--feed:before {
content: "\e92e";
}
.ico--paw:before {
content: "\e90b";
}
.ico--envelope:before {
content: "\e92f";
}
@import "variables";
@font-face {
font-family: '#{$icomoon-font-family}';
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?33ujui');
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?33ujui#iefix') format('embedded-opentype'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?33ujui') format('truetype'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?33ujui') format('woff'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?33ujui##{$icomoon-font-family}') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="ico--"], [class*=" ico--"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$icomoon-font-family}' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico--strategy {
&:before {
content: $ico--strategy;
}
}
.ico--pig {
&:before {
content: $ico--pig;
}
}
.ico--thermometer {
&:before {
content: $ico--thermometer;
}
}
.ico--pirati {
&:before {
content: $ico--pirati;
}
}
.ico--stackshare {
&:before {
content: $ico--stackshare;
}
}
.ico--open-source {
&:before {
content: $ico--open-source;
}
}
.ico--search {
&:before {
content: $ico--search;
}
}
.ico--bubbles {
&:before {
content: $ico--bubbles;
}
}
.ico--map {
&:before {
content: $ico--map;
}
}
.ico--compass {
&:before {
content: $ico--compass;
}
}
.ico--folder-open {
&:before {
content: $ico--folder-open;
}
}
.ico--folder {
&:before {
content: $ico--folder;
}
}
.ico--drawer {
&:before {
content: $ico--drawer;
}
}
.ico--stop {
&:before {
content: $ico--stop;
}
}
.ico--github {
&:before {
content: $ico--github;
}
}
.ico--clock {
&:before {
content: $ico--clock;
}
}
.ico--calendar {
&:before {
content: $ico--calendar;
}
}
.ico--flickr {
&:before {
content: $ico--flickr;
}
}
.ico--instagram {
&:before {
content: $ico--instagram;
}
}
.ico--twitter {
&:before {
content: $ico--twitter;
}
}
.ico--newspaper {
&:before {
content: $ico--newspaper;
}
}
.ico--cart {
&:before {
content: $ico--cart;
}
}
.ico--home {
&:before {
content: $ico--home;
}
}
.ico--link {
&:before {
content: $ico--link;
}
}
.ico--power {
&:before {
content: $ico--power;
}
}
.ico--location {
&:before {
content: $ico--location;
}
}
.ico--phone {
&:before {
content: $ico--phone;
}
}
.ico--linkedin {
&:before {
content: $ico--linkedin;
}
}
.ico--github1 {
&:before {
content: $ico--github1;
}
}
.ico--gplus {
&:before {
content: $ico--gplus;
}
}
.ico--twitter1 {
&:before {
content: $ico--twitter1;
}
}
.ico--facebook {
&:before {
content: $ico--facebook;
}
}
.ico--menu {
&:before {
content: $ico--menu;
}
}
.ico--chevron-right {
&:before {
content: $ico--chevron-right;
}
}
.ico--chevron-left {
&:before {
content: $ico--chevron-left;
}
}
.ico--chevron-down {
&:before {
content: $ico--chevron-down;
}
}
.ico--chevron-up {
&:before {
content: $ico--chevron-up;
}
}
.ico--zoom_out_map {
&:before {
content: $ico--zoom_out_map;
}
}
.ico--arrow-down {
&:before {
content: $ico--arrow-down;
}
}
.ico--link1 {
&:before {
content: $ico--link1;
}
}
.ico--city {
&:before {
content: $ico--city;
}
}
.ico--beer {
&:before {
content: $ico--beer;
}
}
.ico--edit-pencil {
&:before {
content: $ico--edit-pencil;
}
}
.ico--at {
&:before {
content: $ico--at;
}
}
.ico--calculator {
&:before {
content: $ico--calculator;
}
}
.ico--bank {
&:before {
content: $ico--bank;
}
}
.ico--facebook-official {
&:before {
content: $ico--facebook-official;
}
}
.ico--close {
&:before {
content: $ico--close;
}
}
.ico--anchor {
&:before {
content: $ico--anchor;
}
}
.ico--feed {
&:before {
content: $ico--feed;
}
}
.ico--paw {
&:before {
content: $ico--paw;
}
}
.ico--envelope {
&:before {
content: $ico--envelope;
}
}
$icomoon-font-family: "pirati-ui" !default;
$icomoon-font-path: "fonts" !default;
$ico--strategy: "\e932";
$ico--pig: "\e928";
$ico--thermometer: "\e90a";
$ico--pirati: "\e90d";
$ico--stackshare: "\e90f";
$ico--open-source: "\e90e";
$ico--search: "\e913";
$ico--bubbles: "\e930";
$ico--map: "\e914";
$ico--compass: "\e915";
$ico--folder-open: "\e916";
$ico--folder: "\e917";
$ico--drawer: "\e918";
$ico--stop: "\e919";
$ico--github: "\e91a";
$ico--clock: "\e91b";
$ico--calendar: "\e91c";
$ico--flickr: "\e91d";
$ico--instagram: "\e91e";
$ico--twitter: "\e91f";
$ico--newspaper: "\e920";
$ico--cart: "\e921";
$ico--home: "\e922";
$ico--link: "\e912";
$ico--power: "\e90c";
$ico--location: "\e906";
$ico--phone: "\e907";
$ico--linkedin: "\e903";
$ico--github1: "\e904";
$ico--gplus: "\e900";
$ico--twitter1: "\e901";
$ico--facebook: "\e902";
$ico--menu: "\e933";
$ico--chevron-right: "\e923";
$ico--chevron-left: "\e924";
$ico--chevron-down: "\e925";
$ico--chevron-up: "\e926";
$ico--zoom_out_map: "\e927";
$ico--arrow-down: "\e911";
$ico--link1: "\e910";
$ico--city: "\e908";
$ico--beer: "\e909";
$ico--edit-pencil: "\e929";
$ico--at: "\e905";
$ico--calculator: "\e931";
$ico--bank: "\e92a";
$ico--facebook-official: "\e92b";
$ico--close: "\e92c";
$ico--anchor: "\e92d";
$ico--feed: "\e92e";
$ico--paw: "\e90b";
$ico--envelope: "\e92f";
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment