Creative Commons ikonok @font-face segítségével

Szerző:Dragon Z. 3 hozzászólás Creative Commons ikonok @font-face segítségével című bejegyzéshez

Egy kis kockaság arra az esetre, ha netán valaki szeretne Creative Commons ikont megjeleníteni weboldalán, de nem a szokásos képbeillesztéssel oldaná meg, hanem valami egészen más trükkre éhes. Nem igazán köztudott, de a CC rendelkezik egy true type font-settel, ami persze valójában az általuk használt ikonok gyűjteménye – ezt viszont ügyesen be lehet applikálni némi html+css kombóval bármilyen oldalba, például imígyen:

<html> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
@media screen { @font-face { font-family: 'CC-ICONS'; 
font-style: normal; 
font-weight: normal; 
src: url('http://mirrors.creativecommons.org/presskit/cc-icons.ttf') 
format('truetype'); } 
span.cc { font-family: 'CC-ICONS'; color: #ABB3AC; } 
} 
</style> 
</head>
<body> 
<p>Key: a: SA, b: BY, c: CC Circle, d: ND, n: NC, m: Sampling, s: Share, 
r: Remix, C: CC Full Logo</p>
<span class="cc">a b c d n m s r C</span>
<p>This page is licensed under <span class="cc">C</span></p>
</body> 
</html>

Ennek pedig ez lesz az eredménye:

a b c d n m s r C
This page is licensed under C

Egy egyszerű @font-face trükk az egész tehát, és a változókat így máris a stíluslapban igazíthatjuk kényünkre-kedvünkre.

3 hozzászólás a(z) “Creative Commons ikonok @font-face segítségével” című bejegyzéshez

A hozzászólások jelenleg nem engedélyezettek ezen a részen.