websharks / sharkicons
Font containing WebSharks logos/icons & more.
Installs: 9 579
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 0
Language:CSS
Requires (Dev)
- package/bourbon: 4.2.3
This package is not auto-updated.
Last update: 2024-12-24 05:52:59 UTC
README
Font containing WebSharks logos/icons + many others; including FontAwesome! See: DEMO
Contains over 750 icons. Total file size: 212kb (compare to stand-alone FontAwesome @ 136kb).
Using Icons in HTML Markup
<link rel="stylesheet" type="text/css" href="/path/to/sharkicons/src/long-classes.min.css" />
<i class="sharkicon sharkicon-broom"></i>
Short Classes (si-
instead of sharkicon-
)
<link rel="stylesheet" type="text/css" href="/path/to/sharkicons/src/short-classes.min.css" />
<i class="si si-broom"></i>
Including Classes via SCSS
Note: Bourbon is a required dependency. See: http://bourbon.io/ for details.
@import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); @include sharkicon-short-classes;
Custom Classes via SCSS (prefix
instead of si
)
@import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); @include sharkicon-custom-classes(prefix);
Scoping Classes via SCSS
@import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); .my-product { @include sharkicon-short-classes; }
Creating an Icon via SCSS
Note: you can do this without including the sharkicon-[long|short]-classes
if you like.
@import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); // @include sharkicon-short-classes; .my-product .my-icon { @include sharkicon(broom); }
Equivalent to:
.my-product .my-icon::before { content: '\e000'; font: normal normal normal 14px/1 sharkicons; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: inline-block; font-size: inherit; text-decoration: inherit; text-transform: none; }
Alternatively, you can pass a second argument to sharkicon()
to set the before/after specification. The default value is before
. You might want to change it to after
in some special case.
@import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); // @include sharkicon-short-classes; .my-product .my-icon { @include sharkicon(broom, after); }
Equivalent to:
.my-product .my-icon::after { content: '\e000'; font: normal normal normal 14px/1 sharkicons; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: inline-block; font-size: inherit; text-decoration: inherit; text-transform: none; }
Mapping An Icon Char via SCSS
.my-product .my-icon:hover::after { content: map-get($sharkicons, broom); }