0xflotus / picon Goto Github PK

Usage

Picon is a ligature-based icon font, and so, it does not require any external CSS stylesheet, or any javascript.

Import it:

@font-face {
  font-family:picon;
  src:url(//yne.fr/picon/Picon-Regular.woff2);
}

Declare it the way you like it, here is some examples:

/* the safe */
.picon { font-family:picon; }
/* the brave */
i { font-family:picon; }
/* the markdown lover */
del { font-family:picon; text-decoration: none;}

Use it :

<del>app</del>

to get the app app icon

Hackable

Picon is under SIL Open Font License 1.1 Licencied, so you can

• rebuild your own version
• use it in any commercial project
• modify it
• redistribute/sell it (if you can)

Pico sized

Picon strive to be:

find -name '*.svg' -printf '%s\n' | awk '{s+=$0} END {printf s/NR}'

readable down to 8px * 8px

Iconset	🖼	📞	🔈	🕷️
Clarity
Feather
Fontawesome
Jam
Material
Picon
Entypo

Font

If want to have icons on your website, you may hesistate between using a couple of SVG, or importing a for or simply use unicode glyphs.

Picon is available as SVGs or as a font. But font format offer the following advantages:

• it will assure you to have a reproducible result on any plateform (unlike unicode).
• it can bundle many icons while being lightweight because of it binary and compressed format (unlike SVG).
• it can be used in text-only section like input placeholder or pseudo element (unlike SVG).
• it can be colored to match your style (unlike unicode or SVG that needs to be embedded to do that).
• it can have any brand logo or custom icon you may need (unlike Unicode)

Secret snippets

The following are for advanced users only.

@keyframes wifi {
	0%,100%{content:'wifi-0'}
	20%{content:'wifi-1'}
	40%{content:'wifi-2'}
	60%{content:'wifi-3'}
	80%{content:'wifi-4'}
}
.wifi:after{
	font-family:Picon;
	content:'wifi-4';
	animation: wifi 1s infinite;
}

<input type=reset class=picon value=cross>

<select>
	<optgroup label=iconless>
		<option>wifi-0
	</optgroup>
	<optgroup class=picon label="wifi-0">
		<option>wifi-0
		<option>wifi-4
	</optgroup>
</select>

pre[lang]:after{
	font-family:Picon;
	content:'lang-' attr(lang);
	float:right;
}

[data-picon]{
	position: relative;
	font-size:32px;
}
[data-picon]:after{
	content:attr(data-picon);
	position: absolute;
	left: 0;
	text-shadow: 0 -2px white;
}

<del data-picon=cross>volume</del>