WebIcons

A hangulatjel vagy emotikon (az angol megfelelője, a smiley kiejtése alapján néha: „szmájli”) nyomtatott írásjelek olyan sorozata, amely egy emberi arcot formál, és általában valamilyen érzelmet fejez ki. Tipikus példája a mosolygó fej: :-), :) vagy <3.

Az interneten a hangulatjelek azért terjedtek el, hogy pótolják a beszélgetés során az arckifejezéseket, gesztusokat, amik nélkül a mondanivaló néha félreérthető. Ezek összefoglaló elnevezése emotikon (emóció + ikon), de ehelyett sokszor a smiley (=mosolygó) angol szót használják.

A többi ikontól eltérően nincs szükség beágyazásra, külső link hozzáadására, mivel a böngészők hexadecimális kód alapján jelenítik meg az eredményt. Ezeket a kódokat a böngészők automatikusan felismerik és lefordítják, majd megjelenítik a grafikus megfelelőjét, mint azt az alábbi példa is mutatja:

Példa:

Forráskód

    
    <!DOCTYPE html>
    <html lang="hu">
        <head> 
            <title>Weboldal címe</title>
            <style>
                .smile:after {
                    content: '\1F642';
                }
            </style>
        </head>
        <body> 
            <-- Megjelenítés -->
            <span class="smile" style="font-size: 22px;">🙂</span>
        </body>
    </html>

Egy másik példa, amikor a teljes HTML kódot illesztjük be az adott <TAG> - be:

Forráskód

    
    <!DOCTYPE html>
    <html lang="hu">
        <head> 
            <title>Weboldal címe</title>
        </head>
        <body> 
            <-- HTML kód: &#x1F642; -->
            <-- Eredmény -->
            <span class="smile" style="font-size: 22px;">🙂</span>
        </body>
    </html>

Előfordulhat, hogy egyes hangulatjelek dupla karaktersorból állnak. A megjelenítéshez mindkét karaktersor szükséges, egymás után megadva, szóköz nélkül.

Forráskód

    
    <!DOCTYPE html>
    <html lang="hu">
        <head> 
            <title>Weboldal címe</title>
        </head>
        <body> 
            <-- HTML kód: &#x1F62E;&#x1F4A8; -->
            <-- Eredmény -->
            <span class="smile" style="font-size: 22px;">😮💨</span>
        </body>
    </html>

Bezárás

A tipográfiában a betűtípus egy, az elemeivel összhangba hozott betűtervsorozat, ami egy teljes ábécét alkot, és amelyet nyomtatásban vagy a számítógép képernyőjén meg lehet jeleníteni. Máshogyan fogalmazva a betűtípus olyan betűrajzolatok sorozata, melyek egy bizonyos stílusnak megfelelő, egységesen megtervezett karaktereket írnak le egy karakterkészletben.

A font egy adott betűtípust jelent, amelynek karakterei egy közös fájlban vannak tárolva. A fontfájlok gyártójától függ, hogy az adott betűtípusban a fájl mely karakterek rajzolatát tartalmazza; csak az angol "írógép-betűkészlet", a magyar ékezetes betűk is, egyéb nyelvek betűi, vagy akár a Unicode jelkészlet nagy része. Egy fontban minden tárolt karakter rajzolata egyazon betűtípus tipográfiai jellegzetességeit mutatja. A raszterfontok a betűképeket csak néhány méretben definiálják, a vektorfontok (TrueType, OpenType) karakterei viszont bármilyen méretben megjeleníthetők a minőség változása nélkül. Az előbbi csoporthoz tartoznak például a fon kiterjesztésű fájlok, az utóbbiba a ttf, otf kiterjesztésűek. Egy adott font karakterei megjeleníthetők dőlt (italic) és félkövér (bold) változatban is.

A weboldalon található betűtípusok előnye, hogy a beágyazható stílus fájl bővíthető saját karakterkészlettel, ha az nem szerepelne a listában.

A kiválasztott betűtípus használata a következő módon történik:

Példa:

Forráskód

    
    <!DOCTYPE html>
    <html lang="hu">
        <head> 
            <title>Weboldal címe</title>
            <link rel="stylesheet" href="https://www.webicons.hu/public/css/font-style.css"/>
            <style>
                p {
                    font-family: 'Wedding';
                }
            </style>
        </head>
        <body> 
            <-- Megjelenítés -->
            <p style="font-size: 22px;">Wedding</p>
        </body>
    </html>

Bezárás

A Google ikonok beillesztéséhez a weboldal kétfajta lehetőséget mutat be. Az egyik az alapértelmezett, míg a másik a weboldal fejlesztője által készített és ugyanakkor stabilabb verzió.

Az első és egyszerűbb használathoz írja be a következő sort a HTML-oldal <head> szakaszába:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

Megjegyzés: Ebben az esetben nincs szükség letöltésre vagy telepítésre!

Adja hozzá az material-icons osztályt egy inline elemhez, és illessze be az ikon nevét:

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
                </head>
                <body> 
                    <-- Kód -->
                    <i class="material-icons">accessibility</i>
                    <-- Látható eredmény -->
                    <i class="material-icons"></i>
                    <-- Ikon méretének módosítása - kód -->
                    <i class="material-icons" style="font-size: 22px;">accessibility</i>
                    <-- Ikon méretének módosítása - látható eredmény -->
                    <i class="material-icons" style="font-size: 22px;"></i>
                </body>
            </html>

A következő példa hásználatához egy fájl letöltése szükséges, melyet egy adott helyre kell kicsomagolni, majd onnan beilleszteni. A fájl bejelentkezés után letölthető.

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Fa-struktúra -->
                    
                    <-- Google Icons stílus fájl beágyazása -->
                    <link rel="stylesheet" href="css/icon.css" type="text/css"/>
                </head>
                <body> 
                    <i id="accessibility" class="material-icons"></i>
                </body>
            </html>

Ahogy az ábra is mutatja a fájlok bárhová kicsomagolhatóak, a lényeg, hogy egymás mellé kerüljenek. Átnevezhetőek tetszés szerint, csak akkor ne felejtsük az útvonalban is módosítani a megfelelő névre.

Mint ahogy a kód is mutatja, egy azonosítót kell megadni az ikon nevével. pl.: id="accessibility".
Ami változatlan, az az osztályként megadott név. (class="material-icons") Ezt a nevet nem szabad módosítani.

Az ikonok listája itt található.

Bezárás

Ingyenes, kiváló minőségű, nyílt forráskódú ikontár, közel 1200 ikonnal. Tartalmazza a hagyományos CSS, SVG, SVG sprite vagy webes betűtípusokat. Használja őket Bootstrap-el vagy anélkül bármilyen projektben.

Az oldal kétféle lehetőséget mutat be az alapértelmezett CSS használathoz, melyek példákkal vannak illusztrálva.

Az első és egyszerűbb használathoz írja be a következő sort a HTML-oldal <head> szakaszába:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"/>

Megjegyzés: Ebben az esetben nincs szükség letöltésre vagy telepítésre!

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"/>
                </head>
                <body> 
                    <-- Kód -->
                    <span class="bi-person-fill"></span>
                    <-- Látható eredmény -->
                    <span class="bi-person-fill"></span>
                    <-- Ikon méretének módosítása - kód -->
                    <span class="bi-person-fill" style="font-size: 22px;"></span>
                    <-- Ikon méretének módosítása - látható eredmény -->
                    <span class="bi-person-fill" style="font-size: 22px;"></span>
                </body>
            </html>

A következő példa hásználatához egy fájl letöltése szükséges, melyet egy adott helyre kell kicsomagolni, majd onnan beilleszteni. A fájl bejelentkezés után letölthető.

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Fa-struktúra -->
                    
                    <-- Bootstrap Icons 1.3.0 stílus fájl beágyazása -->
                    <link rel="stylesheet" href="bootstrap-icons-1.3.0/bootstrap-icons.css" type="text/css"/>
                </head>
                <body> 
                    <span class="bi-person-fill"></span>
                </body>
            </html>

Ahogy az ábra is mutatja a fájlok bárhová kicsomagolhatóak, a lényeg, hogy egymás mellé kerüljenek. A főmappát ajánlott átnevezni, de akkor ne felejtsük az elérési útvonalat is módosítani.

Ebben az esetben semmilyen azonosítót nem kell megadni, mint ahogy azt a Google ikonoknál tapasztalni lehetett. Az ikonok megjelenítéséhez elég az ikon osztály-nevét megadni (pl. class="bi-person-fill") és az ikon láthatóvá válik az oldalon. Az ikon pozíciója, mérete vagy színe bármikor módosítható a stílusfájl .bi osztályánál.

A következő felhasználási mód az összes fejlesztő ikonjai közül talán a legegyszerűbben használható. Egyszerűsége abban rejlik, hogy a fájl a teljes csomagot tartalmazza; nem kell semmi kiegészítőt letölteni, vagy külső oldalról beilleszteni.

Fontos itt megjegyezni, hogy csak akkor használja a teljes csomagot, ha más Bootstrap keretrendszert nem használ. Amennyiben 4.0 vagy újabb Bootstrap - et használ, de szeretné a Bootstrap 3 ikonjait használni, akkor elég csak az ikonokat letölteni.

A következő két példa bemutatja hogyan kell használni a Bootstrap 3 ikonokat a gyakorlatban.

Példa 1:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Fa-struktúra -->
                    
                    <-- Bootstrap Icons 3.3.7 stílus fájl beágyazása -->
                    <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
                </head>
                <body> 
                    <span class="glyphicon glyphicon-user"></span>
                </body>
            </html>

A példa szerint van egy css mappa és egy font mappa, amiket célszerű egymás mellet hagyni, ha nem szeretnénk semmit sem módosítani. A css mappa tartalmazza a bootstrap.css fájlt, amit a weboldal fejlécébe kell illeszteni.

Fontos: ha az ikonok megjelenítésében probléma merülne fel, ellenőrizni kell a css fájlban megadott elérési útvonalat, illetve, hogy meg van - e minden fájl, vagy mappa.

Az ikon átméretezéséhez a már korábban bemutatott módszer is alkalmazható, vagy a stílus fájlban a .glyphicon osztályon belűli módosítás vagy új bejegyzés, ha még nem szerepel.

A következő módszer azt mutatja be, amikor csak az ikonokat tartalmazó fájl illesszük be.

Példa 2:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Fa-struktúra -->
                    
                    <-- Glyphicons stílus fájl beágyazása -->
                    <link rel="stylesheet" href="css/glyphicons.css" type="text/css"/>
                </head>
                <body> 
                    <span class="glyphicon glyphicon-phone-alt"></span>
                </body>
            </html>

Mint azt a példa is mutatja, ki vannak jelölve azok a részek, útvonalak, amik alapján az ikon láthatóvá válik. Módosítható az elrendezés, viszont akkor a css fájlban megadott útvonalat is módosítani kell.

Az ikonok listája itt található.

Bezárás

A Font Awesome 4.7.0 olyan ikonok gyűjteménye, melyek azonnal testre szabhatók méret, szín, árnyék és bármi másra, ami a CSS segítségével elérhető.

Talán a legnépszerűbb ikonok gyűjteménye, mely jelenleg is a legtöbb ikon típust tartalmazza.
Telepítést nem igényel, használata egyetlen fájl beillesztésévél és a fonts mappa segítségével történik.

Az alábbi példák segítségével bemutatom milyen lehetőségek vannak a Font Awesome 4.7.0 ikonjainak használatára, kezdve a legegyszerűbbel és a kevésbé egyszerűvel folytatva.

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
                </head>
                <body> 
                    <-- Kód -->
                    <i class="fa fa-car"></i>
                    <-- Példa egy számozatlan listára, animált ikonnal / Ikon méretének, pozíciójának módosítása -->
                    <ul class="fa-ul">
                        <li><i class="fa-li fa fa-check-square" style="font-size: 22px; position: relative; left: 0; width: 24px;"></i></li>
                        <li><i class="fa-li fa fa-spinner fa-spin" style="font-size: 22px; position: relative; left: 0; width: 24px;"></i></li>
                        <li><i class="fa-li fa fa-square" style="font-size: 22px; position: relative; left: 0; width: 24px;"></i></li>
                    </ul>
                </body>
            </html>

A számozatlan lista (<ul>) a példa szerint kapott egy class="fa-ul" osztályt, ami a lista-elemek elől eltünteti a karaktareket. Ugyanez az eljárás alkalmazható a számozott listára is. Amennyiben részletesebb leírásra is kíváncsi, keresse fel a Font Awesome hivatalos oldalát.

A következő példában a már megszokott módon importáljuk a CSS fájlt, mint ahogy azt az ábra is mutatja. A külömbség az a már bemutatott példákhoz, hogy a font mappa most közvetlenül a font-awesome.min.css fájl mellett van, ezért az elérési útvonalat is át kellet írni.

A kép csak nagy felbontásban látható!

Kattintson ide a kép megjelenítéséhez

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Fa-struktúra -->
                    
                    <-- Font Awesome 4.7.0 stílus fájl beágyazása -->
                    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"/>
                </head>
                <body> 
                    <span class="fa fa-bank"></span>
                </body>
            </html>

Amint a példa is mutatja, a fonts mappában szinte minden fájlt használ a css, ezért ha egy mód van rá őrizzük meg azokat eredeti formájukban. A legtöbb esetben elég szokott lenni egyetlen fájl is, de a Font Awesome az ikonoknak beágyazott stílust is ad, melyeket a Font Awesome 5.15.1 verziónál néhány példában bemutatok. Továbbá észrevehető az is, hogy a többi ikon beágyazása is hasonló, néhány eltérést leszámítva. Ezek az eltérések valamilyen módon (pl.: CSS) módosíthatók.

Ami még fontos lehet, hogy egyszerre csak egy gyártó ikonjait használjuk. Válasszunk ki olyat, amelyiknél minden ikon szerepel, amire éppen szükségünk van. Személyes ajánlásom nincs, hiszen ez a weboldal nem azért készült, hogy a számomra legjobbat mutassam be, hanem, hogy több lehetőséget is bemutassak az ikonok használatához.

A Font Awesome 5-nek PRO kiadása és INGYENES kiadása is van. A PRO 7842 ikonnal, míg az INGYENES 1588 ikonnal rendelkezik. Ez a leírás az INGYENES kiadásra összpontosít.

Az INGYENES Font Awesome 5 ikonok használatához kiválaszthatja a Font Awesome könyvtár letöltését, vagy regisztrálhat egy fiókot a Font Awesome webhelyen, és beszerezhet egy kódot (KIT CODE néven), amelyet a weboldalra történő felvételkor használhat.

Font Awesome regisztráció

Ha a fentebb megadott linkre kattint, új ablakban megnyílik a Font Awesome Start oldala, ahol egy ingyenes regiszrációra van lehetőség.

Picit lejjebb görgetve az oldalt az alábbi mezővel lehet találkozni:

Csak egy email címet kell megadni, ahová az aktiváló linket küldik.
A beérkezett emailben kattintsunk az alábbi gombra: Click to Confirm Your Email Address + Set Things Up

Regisztráció véglegesítése:

A jelszó megadása után létrejön a Font Awesome INGYENES fiók, ami bármikor fel frissíthető PRO fiókká.

Ezek után már csak személyes adatainkat kell megadni, illetve ki lehet választani, hogy melyik verzióhoz kérjük a KIT KÓD - ot. Ez a lépés akár ki is hagyható a lap alján lévő linkre kattintva.

Ezzel létre is jött a Font Awesome fiók, ami rötön felajánlja a név módosítását.

A név módosítása mellet lehetőség van verziószám módosítására, illetve itt is elő lehet fizetni PRO verzióra.
Technológia módosítása is lehetséges, továbbá domain név hozzáadása is. Mindezek végeztével már csak el kell menteni a módosításokat, majd a Font Awesome által generált script - et e weboldal fejlécébe másolni.

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Font Awesome 5.15.1 stílus fájl beágyazása -->
                    <script src="https://kit.fontawesome.com/sajatkitnev.js" crossorigin="anonymous"</script>
                </head>
                <body> 
                    <span class="fab fa-twitter"></span>
                </body>
            </html>

Az ingyenes regisztráció saját ikon(ok) feltöltését is engedélyezi, mely megosztható más felhasználókkal is.
A Font Awesome - ot az is egyedivé teszi, hogy már beépített stílus definíciókkal is rendelkezik. Többféle méret, animáció és más megjelenítési stílus.

További információkat a Font Awesome dokumentációjában olvashat.

A következő példa a már megszokott beágyazási módszert mutatja be azzal a külömbséggel, hogy már a fajl kiválasztása közben ki lehet választani milyen tipusú ikonokat akarunk majd megjeleníteni. A példában az all.js JavaScript fájlt fogom használni.

Példa:

Forráskód

            
            <!DOCTYPE html>
            <html lang="hu">
                <head> 
                    <title>Weboldal címe</title>
                    <-- Fa-struktúra -->
                    
                    <-- Font Awesome 5.15.1 stílus fájl beágyazása -->
                    <link rel="stylesheet" href="css/fontawesome-free-5.15.1-web/js/all.js" type="text/css"/>
                </head>
                <body> 
                    <span class="fas fa-camera"></span>
                </body>
            </html>

Az all.js használatával az összes ikon megjeleníthető. Hátránya, hogy rengeteg olyan fájlt tartalmaz(hat) amire semmi szükségünk. Ha tárhely szűkében rendelkezünk, akkor ajánlott inkább a regisztráció és a már fentebb említett KIT KÓD használata.

Az ingyenes ikonok listája itt található.

Bezárás

Többezer ikon egy helyen!

3 fejlesztői cég ikonjai közül választhat, többféle kategóriában.

Részletes leírás, példákkal illusztrálva.

Az oldalon biztosan megtalálja az önnek megfelelő ikont legyen az akár közösségi,vagy menü-ikon.

Regisztráció

Webicons

Hasznos oldalak

Kapcsolatfelvétel