Icon fontok használata

Szerző:   |   2014-03-30

Az icon fontok használatával vektoros ikonokat tudunk megjeleníteni a weben, melyek méretezhetők, színezhetők és akár animálhatók is.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


	<ul>
		<li><a href="" class="icon-music">Music</a></li>
		<li><a href="" class="icon-search">Search</a></li>
		<li><a href="" class="icon-mail-alt">Mail</a></li>
		<li><a href="" class="icon-camera">Gallery</a></li>
	</ul>

CSS forráskód


@font-face {
	font-family: 'fontello';
	src: url('../font/fontello.eot?50091263');
	src: url('../font/fontello.eot?50091263#iefix') format('embedded-opentype'),
	   url('../font/fontello.woff?50091263') format('woff'),
	   url('../font/fontello.ttf?50091263') format('truetype'),
	   url('../font/fontello.svg?50091263#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?50091263#fontello') format('svg');
  }
}
 

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 120%;
	font-family: 'Rancho', cursive;
}

body { background: url('../bg.png') #fcf9f2 }

[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	text-align: center;
	margin: 0 20px 0 15px;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	font-size: 57%;
	color: rgba(255,255,255,0.4);
	text-shadow: none
}
 
.icon-music:before { content: '\e800'; }
.icon-search:before { content: '\e801'; }
.icon-mail-alt:before { content: '\e803'; }
.icon-camera:before { content: '\e802'; }
.icon-comment:before { content: '\e804'; }

h1 {
	text-align: center;
	font-size: 300%;
	margin: 30px 0;
}

ul {
	width: 300px;
	margin: 0 auto;
	list-style: none;
}
li {
	margin: 0 0 20px 0;
}
ul li a {
	background: #89c2b2;
	text-decoration: none;
	color: #fff;
	padding: 5px;
	display: block;
	box-shadow: 6px 6px 0px rgba(160,160,140,0.2);
	transition: all 0.3s;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
}
ul li a:hover {
	background: #43756e;
	color: #fff;
	padding-left: 40px;
	transition: all 0.3s linear;
}

14 hozzászólás

  1. 2018. január 1. hétfő - 19:28

    Üdv!

    Most néztem meg a tutorialt és ha én input tagbe akarom berakni akkor nem működik. Mit tegyek?

    A választ előre is köszönöm!
    További jó estét!

    • 2018. január 1. hétfő - 19:41

      Input-ba közvetlenül nem tudod belerakni. Ki kell trükközni, például az input keretét leveszed, és teszel az egész köré egy DIV-et aminek adsz bordert. Ebbe a DIV-be teszed az inputot és mellé az ikont. Így olyan mintha az input-ban lenne az ikon is.

  2. 2016. február 23. kedd - 12:36

    Üdv. Az a kérdésem, hogy miért van az a jelenség, hogy néha egyszerűen eltűnnek az ikonok? Például van olyan, hogy betöltöm az oldalt, akkor meg is jelenik minden, aztán egy frissítés után eltűnnek az oldalról.

  3. 2015. augusztus 2. vasárnap - 11:39

    Szia!
    Felmerült egy olyan probléma a honlapom szerkesztésénél amit nem igazán értek.
    Találtam az interneten nagy méretű színes ikonokat, amelyek png formátumban 512X512-es méretűek. De amikor beillesztem az oldalra bizonyos böngészőknél se eredeti sem kicsinyített formában nem tapasztalható megjelenésnél hiba (pl.: Chrome). Viszont máshol eredeti méretében hibátlan de ha lekicsinyítem css-sel akkor poxelessé válnak.
    Példa a képeken:
    http://kepfeltoltes.hu/150802/jo_www.kepfeltoltes.hu_.png
    http://kepfeltoltes.hu/150802/rossz_www.kepfeltoltes.hu_.png
    Válaszodat előre is köszönöm!

  4. 2015. július 17. péntek - 15:03

    Szia Tamás!
    Mi van akkor, ha én az oldalhoz hozzá akarok adni egy ikont vagy éppen már nem kell és le akarom venni, akkor újra ki kell jelölgetni az oldalon az ikonokat, amik kellenek és újra letölteni az egészet vagy ennek van valami más megoldása is, hogy tudjak ikont hozzáadni a már letöltött fájlhoz?
    Válaszodat előre köszönöm.

    • 2015. július 17. péntek - 15:04

      Van egy config.json fájl amit letölt a pakkal együtt. Azt tedd el, aztán azzal vissza tudod importálni bármikor az összes kijelölt ikont és a saját ikonokat is.

  5. 2015. január 16. péntek - 10:03

    És még a Latin Extenddel is elöfordul,hogy nincsen hosszú ö…

  6. 2014. július 31. csütörtök - 14:46

    Sziasztok!

    Ő Ű betűket miért nem jeleníti meg normálisan ez az oldal se. Hogy lehet megjavítani? Hasonló problémám van nekem is.

    Üdv

    Attila

  7. 2014. május 26. hétfő - 16:18

    Kedves Tamás!
    Tudom, sokan nyaggatnak mindenféle kérdésekkel. Én most egy olyan kérdést szeretnék feltenni, ami talán sokakat érdekelhet. A mindenféle képernyőméretű digitális eszközök világában egyre növekszik az igény reszponzív (responsive) HTML/CSS3 webdesignra. Jómagam 10 éve fejlesztek html/css illetve flash oldalakat. Itt volt az ideje megismerkedni az új szabvánnyal. No de a szokásos nyűgökön kívül, ami engem nagyon leköt az a magyar nyelvű karakterkódolás kérdése. Nem vagyok programozó, legnagyobb tapasztalattal a webdesign és webszerkesztés területén van. A karakterkódolás témában angol nyelvű oldalakkal semmi gondom, hiszen alapból UTF-8. A reszponzív weboldalak sablonjai ( ha vásárolt ha ingyenes) szintén UTF-8 karakter kódolásúak alapból. Ha egy UTF-8 sablonba szerkesztek MAGYAR nyelvű weboldalt, akkor hogyan és hol kell megadni a karakterkódolást úgy, hogy az a megfelelő formában jelenjen meg a böngészőkben? Ugyanez a gondom a reszponzív weboldal kapcsolati űrlapjának php kódjával is. Nagyon örülnék , sőt kifejezetten hálás lennék ha erről a témáról írnál valami kis szösszenetet.
    Köszönettel:
    Alexa

    • 2014. május 26. hétfő - 17:14

      A problémádnak nincs köze az oldal reszponzív mivoltához, szerintem egyszerűen csak arról van szó, hogy a sablon olyan betűkészletet használ amiben nincsenek magyar ékezetes karakterek. Ilyenkor hiába van UTF-8-ra állítva a karakterkódolás, nem tudja megjeleníteni a betűt a böngésző, mert hiányzik az adott karakter.

      Két megoldás létezik:

      1. másik fontot használsz, olyat amiben megtalálható minden magyar karakter is
      2. megrajzolod az ékezetes karaktereket az adott fonthoz, ami körülményes és problémás, illetve szerzői jogi problémákat is felvethet

      Javaslom a Google Fonts használatát. (google.com/fonts) Bal hasábban bejelölöd a scriptnél, hogy “latin extended” és akkor csak olyan fontokat fog listázni amikben megtalálható minden ékezetes karakter.

  8. 2014. április 13. vasárnap - 11:31

    Szia!
    Anno olvastam az ego-ban, hogy az egyik referenciádnál egyedi tartalomkezelőt készítettél.
    Az milyen?

    • 2014. április 13. vasárnap - 15:51

      Ahol dolgoztam régen ott saját tartalomkezelőt használtunk amit mi fejlesztettünk. Cégeknél általában ez a szokás.

  9. 2014. április 1. kedd - 18:34

    Főleg hogy külön css-t kell hozzá írni, de az ie 8 már jól kezeli a css-t az ie7-hez képest

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...