Icon fontok használata

Szerző: Mérei Tamás   |   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
  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....