Mérei Tamás webdesigner

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ó

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;
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

12 hozzászólás

  1. László
    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.

  2. Balázs
    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!

  3. Ádám
    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.

    • cyrex
      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.

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

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

  5. Deé Attila
    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

  6. Szlávics Alexa
    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

    • cyrex
      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.

  7. WebStarter
    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?

    • cyrex
      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.

  8. Adam
    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

Legújabb hozzászólások