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
  • HTML5 + CSS3 menü

    Ki az a Sanyi?...

  • Scrollbar színezgetés CSS-sel

    Köszi a választ. Igen, egyébként azt használtam, amit először küldtél, és azzal állt fent az említett probléma. Már váltottam plugint azóta, és már me...

  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...