Csatlakoztatása és használata betűtípus ikonochnyh

Ahhoz, hogy gyorsan és könnyen skálázható hozzá képeket a különböző elemeket a helyszínen használata nélkül sprite képek. Akkor lehet alkalmazni ikonochny font, amely tartalmazza az összes szükséges ikonok ugyanabban a stílusban. A legtöbb esetben a kiírt karakterek tehát helyesen jelennek meg a böngészőben az Internet-felhasználók, és éles marad növekvő és csökkenő weboldalon. És bár a képelemek egy meglehetősen egyszerű, de ma egy nagyon elegáns design, a tervezés, mint például a szín és a háttér, meg lehet változtatni könnyen.
A szolgáltatás ingyenes, készen arra, hogy építsenek font kép elég, a különböző ikonok, képes megfelelni szinte minden követelménynek, ha az épület egy weboldal vagy blog design. Ebben a cikkben fogunk összpontosítani, hogyan lehet csatlakozni ikonochny font és használja a site design.

A két legnépszerűbb erőforrás Font Félelmetes és Fontello. Az első (és legfontosabb) - azok szabadon; második - betűtípus Awesome - adja a nyilvánosság közvetlen letöltési linket a font a házigazda, azaz nem kell használni a, vagy kérjen harmadik fél hosting szükséges fájlokat, Fontello összeszerelni a saját betűtípust fel az oldalra ikonra a .svg formátumban, vagy válasszon a készlet az is, hogy van szükség ebben az esetben, letöltés helyett minden ami van.

Hogyan lehet csatlakozni az oldalra font ikonochny

Módon csatlakoztatható a pillanatban három:

1. Ha lehetséges, egy közös (állami) egy közvetlen linket tárhely szolgáltatás, amelyet el kell helyezni a szakasz . jobb, vagy magasabb a zárás előtt . ez hogyan megy.
Betűtípus Félelmetes, hogy a legújabb verzióját a referencia néz ki:

2. Töltse le a fájlt az összes szükséges fájlt, bontsa ki a mappák tartalmát és CSS betűtípusok, hogy helyezze a kivont fájlokat ellenséges webhely a megfelelő mappába, és pont a referencia szakasz . webhely az alábbiak szerint: -

- Csak, hogy átadja helyét egy mappát:

- távolról csatlakozni a CSS fájlokat a megfelelő mappába:

3. A letöltés után az archív fájlokat, csak kivonat tartalmát a Fonts mappát, és csatlakoztassa ikonochny font, a jogállamiság CSS @ font-face:

# 64; font-face font-family: 'fontello';
src: url ( '.. path-to-file / fontello.eot');
src: url ( '.. path-to-file / fontello.woff) formátumban ( 'WOFF')
url ( '.. path-to-file / fontello.ttf) méret (TrueType),
url ( '.. path-to-file / fontello.svg # fontello) méret (svg');
font-weight: normal;
font-style: normal;
>

Hogyan kell használni a betűtípus ikonochny Online

Minden kiválasztott karakter van neve és egy kódot, akkor láthatjuk, mindkettőt az oldalon a hivatalos oldalon, és a demo oldalt a letöltött archív. Név, kompatibilitás még egy további elemet, és egy osztály esetében azt szeretné, az ikon, a kód használható UTF-szimbólum ikonok. Hogyan adjunk karakter az oldalra verziójától függ a font kapcsolatokat.

Ha a második lehetőség - csatlakozni a betűtípus a CSS-fájlokat. adhatunk, mint a karakterek alapján osztály és kód:

1. Hozzon létre egy üres elem class ikonok, és add meg a kívánt egység:

2. Adjon hozzá egy osztály egy szimbólum nevét a kívánt elemet:

3. Add a CSS pszeudo eleme az ikont, amely tartalmazni fogja a kívánt karakter kód UTF-, és feltünteti a használt betűtípus (ebben a példában - Fontello):

ul li a :: előtti tartalom: '\ e80a';
font-family: "fontello";
font-style: normal;
font-weight: normal;
>

Ha a kapcsolat ikon font használni a harmadik lehetőség - csak a font fájlokat. majd annak érdekében, hogy képes legyen felvenni ikonok előirányzat a megfelelő class-name a CSS meg kell tenni a további tervezési, hogy kapcsolatot létesítsen a betűtípus ezeket az elemeket, és minden egyes pontja a kapcsolódó szimbólum:

[Class ^ = "ikon -"] :: előtt,
[Class * = "ikon -"] :: mielőtt font-family: "fontello";
font-style: normal;
font-weight: normal;
>
.icon-doc-inv :: előtti tartalom: '\ E801';
>
.icon-mail-alt :: előtti tartalom: '\ E805';
>

de lehet csinálni nélküle, a bejegyzés típusát:

/ * Ikon lesz hozzá * /
.icon-doc-text-inv :: előtt
ul li a :: előtt

- Működni fog egyébként.

Hogyan lehet csatlakozni a ikonochny betűtípus Blogger (Blogspot)

előző ◈ a következő