forked from samuel-p/sp-codes.de
updated icons to custom font (icomoon)
This commit is contained in:
parent
bd591594e7
commit
22274eed29
GPG key ID:
2AD495D17760CB4E
79 changed files with 453 additions and 192 deletions
|
|
@ -1,55 +0,0 @@
|
|||
.si, .si::before {
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.si-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.si-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.si-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.si::before {
|
||||
content: '\200b';
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@mixin svg-icon($name) {
|
||||
.si-#{$name}::before {
|
||||
background-image: url("../img/icon/#{$name}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@include svg-icon('bars');
|
||||
@include svg-icon('book');
|
||||
@include svg-icon('comment-dots');
|
||||
@include svg-icon('comments');
|
||||
@include svg-icon('envelope');
|
||||
@include svg-icon('firefox-browser');
|
||||
@include svg-icon('gitea');
|
||||
@include svg-icon('github');
|
||||
@include svg-icon('hand-holding-heart');
|
||||
@include svg-icon('home');
|
||||
@include svg-icon('language');
|
||||
@include svg-icon('mastodon');
|
||||
@include svg-icon('matrix');
|
||||
@include svg-icon('opencollective');
|
||||
@include svg-icon('search');
|
||||
@include svg-icon('stackoverflow');
|
||||
@include svg-icon('server');
|
||||
@include svg-icon('tags');
|
||||
@include svg-icon('threema');
|
||||
@include svg-icon('twitter');
|
||||
@include svg-icon('users');
|
||||
@include svg-icon('wifi');
|
||||
@include svg-icon('xmpp');
|
||||
@include svg-icon('youtube');
|
||||
24
src/scss/icons/flags.scss
Normal file
24
src/scss/icons/flags.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// flag-icon-css
|
||||
$flag-icon-path: "" !default;
|
||||
|
||||
[class^="fi-"], [class*=" fi-"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 1.33333em;
|
||||
line-height: 1em;
|
||||
background-size: contain;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::before {
|
||||
content: '\00a0';
|
||||
}
|
||||
}
|
||||
|
||||
.fi-us {
|
||||
background-image: url('#{$flag-icon-path}/us.svg');
|
||||
}
|
||||
|
||||
.fi-de {
|
||||
background-image: url('#{$flag-icon-path}/de.svg');
|
||||
}
|
||||
225
src/scss/icons/style.scss
Normal file
225
src/scss/icons/style.scss
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
@import "variables";
|
||||
|
||||
@font-face {
|
||||
font-family: '#{$icomoon-font-family}';
|
||||
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?9r0igb');
|
||||
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?9r0igb#iefix') format('embedded-opentype'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff2?9r0igb') format('woff2'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?9r0igb') format('woff'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?9r0igb') format('truetype'),
|
||||
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?9r0igb##{$icomoon-font-family}') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="i-"], [class*=" i-"] {
|
||||
/* 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;
|
||||
|
||||
/* own changes */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.i-fw {
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.i-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.i-3x {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.i-4x {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.i-network-wired {
|
||||
&:before {
|
||||
content: $i-network-wired;
|
||||
}
|
||||
}
|
||||
.i-money-bill {
|
||||
&:before {
|
||||
content: $i-money-bill;
|
||||
}
|
||||
}
|
||||
.i-chart-line {
|
||||
&:before {
|
||||
content: $i-chart-line;
|
||||
}
|
||||
}
|
||||
.i-info-circle {
|
||||
&:before {
|
||||
content: $i-info-circle;
|
||||
}
|
||||
}
|
||||
.i-code {
|
||||
&:before {
|
||||
content: $i-code;
|
||||
}
|
||||
}
|
||||
.i-xmpp {
|
||||
&:before {
|
||||
content: $i-xmpp;
|
||||
}
|
||||
}
|
||||
.i-wifi {
|
||||
&:before {
|
||||
content: $i-wifi;
|
||||
}
|
||||
}
|
||||
.i-youtube {
|
||||
&:before {
|
||||
content: $i-youtube;
|
||||
}
|
||||
}
|
||||
.i-twitter {
|
||||
&:before {
|
||||
content: $i-twitter;
|
||||
}
|
||||
}
|
||||
.i-threema {
|
||||
&:before {
|
||||
content: $i-threema;
|
||||
}
|
||||
}
|
||||
.i-stackoverflow {
|
||||
&:before {
|
||||
content: $i-stackoverflow;
|
||||
}
|
||||
}
|
||||
.i-search {
|
||||
&:before {
|
||||
content: $i-search;
|
||||
}
|
||||
}
|
||||
.i-opencollective {
|
||||
&:before {
|
||||
content: $i-opencollective;
|
||||
}
|
||||
}
|
||||
.i-mastodon {
|
||||
&:before {
|
||||
content: $i-mastodon;
|
||||
}
|
||||
}
|
||||
.i-hand-holding-heart {
|
||||
&:before {
|
||||
content: $i-hand-holding-heart;
|
||||
}
|
||||
}
|
||||
.i-github {
|
||||
&:before {
|
||||
content: $i-github;
|
||||
}
|
||||
}
|
||||
.i-gitea {
|
||||
&:before {
|
||||
content: $i-gitea;
|
||||
}
|
||||
}
|
||||
.i-firefox {
|
||||
&:before {
|
||||
content: $i-firefox;
|
||||
}
|
||||
}
|
||||
.i-copyright {
|
||||
&:before {
|
||||
content: $i-copyright;
|
||||
}
|
||||
}
|
||||
.i-book {
|
||||
&:before {
|
||||
content: $i-book;
|
||||
}
|
||||
}
|
||||
.i-matrix {
|
||||
&:before {
|
||||
content: $i-matrix;
|
||||
}
|
||||
}
|
||||
.i-server {
|
||||
&:before {
|
||||
content: $i-server;
|
||||
}
|
||||
}
|
||||
.i-credit-card {
|
||||
&:before {
|
||||
content: $i-credit-card;
|
||||
}
|
||||
}
|
||||
.i-external-link {
|
||||
&:before {
|
||||
content: $i-external-link;
|
||||
}
|
||||
}
|
||||
.i-heart {
|
||||
&:before {
|
||||
content: $i-heart;
|
||||
}
|
||||
}
|
||||
.i-home {
|
||||
&:before {
|
||||
content: $i-home;
|
||||
}
|
||||
}
|
||||
.i-tags {
|
||||
&:before {
|
||||
content: $i-tags;
|
||||
}
|
||||
}
|
||||
.i-comments {
|
||||
&:before {
|
||||
content: $i-comments;
|
||||
}
|
||||
}
|
||||
.i-users {
|
||||
&:before {
|
||||
content: $i-users;
|
||||
}
|
||||
}
|
||||
.i-bars {
|
||||
&:before {
|
||||
content: $i-bars;
|
||||
}
|
||||
}
|
||||
.i-envelope {
|
||||
&:before {
|
||||
content: $i-envelope;
|
||||
}
|
||||
}
|
||||
.i-language {
|
||||
&:before {
|
||||
content: $i-language;
|
||||
}
|
||||
}
|
||||
.i-user-secret {
|
||||
&:before {
|
||||
content: $i-user-secret;
|
||||
}
|
||||
}
|
||||
.i-heartbeat {
|
||||
&:before {
|
||||
content: $i-heartbeat;
|
||||
}
|
||||
}
|
||||
.i-commenting {
|
||||
&:before {
|
||||
content: $i-commenting;
|
||||
}
|
||||
}
|
||||
39
src/scss/icons/variables.scss
Normal file
39
src/scss/icons/variables.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
$icomoon-font-family: "icomoon" !default;
|
||||
$icomoon-font-path: "fonts" !default;
|
||||
|
||||
$i-network-wired: "\e903";
|
||||
$i-money-bill: "\e904";
|
||||
$i-chart-line: "\e905";
|
||||
$i-info-circle: "\e906";
|
||||
$i-code: "\e907";
|
||||
$i-xmpp: "\e908";
|
||||
$i-wifi: "\e909";
|
||||
$i-youtube: "\e90a";
|
||||
$i-twitter: "\e90b";
|
||||
$i-threema: "\e90c";
|
||||
$i-stackoverflow: "\e90d";
|
||||
$i-search: "\e90e";
|
||||
$i-opencollective: "\e90f";
|
||||
$i-mastodon: "\e910";
|
||||
$i-hand-holding-heart: "\e911";
|
||||
$i-github: "\e912";
|
||||
$i-gitea: "\e913";
|
||||
$i-firefox: "\e914";
|
||||
$i-copyright: "\e915";
|
||||
$i-book: "\e916";
|
||||
$i-matrix: "\e900";
|
||||
$i-server: "\e901";
|
||||
$i-credit-card: "\e902";
|
||||
$i-external-link: "\e917";
|
||||
$i-heart: "\f004";
|
||||
$i-home: "\f015";
|
||||
$i-tags: "\f02c";
|
||||
$i-comments: "\f086";
|
||||
$i-users: "\f0c0";
|
||||
$i-bars: "\f0c9";
|
||||
$i-envelope: "\f0e0";
|
||||
$i-language: "\f1ab";
|
||||
$i-user-secret: "\f21b";
|
||||
$i-heartbeat: "\f21e";
|
||||
$i-commenting: "\f27a";
|
||||
|
||||
|
|
@ -9,13 +9,10 @@
|
|||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
|
||||
|
||||
$fa-font-path: "../font";
|
||||
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";
|
||||
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
|
||||
@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
|
||||
$flag-icon-rect-path: '';
|
||||
@import "node_modules/flag-icon-css/sass/flag-icon";
|
||||
$icomoon-font-path: "../font";
|
||||
@import "icons/style";
|
||||
$flag-icon-path: '../img';
|
||||
@import "icons/flags";
|
||||
|
||||
$primary: #fea500;
|
||||
$primary_dark: #e5a52e;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue