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
  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...

  • Bootstrap carousel

    https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery...

  • Bootstrap carousel

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá...