Tanácsok a beállítás ikonok a szövegben
Ügyesen, igaz? Összehangolása ikonok is elég ijesztő feladat, különösen, ha az ikonok által több ember. Őszintén szólva, azt hittem, hogy az a kérdés, olyan egyszerű, hogy azt lehet válaszolni egy tweet. Ahhoz azonban, hogy egy tökéletes este ikonok a szövegben meg kell próbálni.
Szerencsére nekünk van egy pár egyetemes zsinatok, ügyelve arra, hogy mindig tudjuk, mi a ikonok igazodnak tökéletesen.
Tipp 1: Döntse el a méret ikonok
Vannak más formátumok mellett ikonok SVG. Sok olyan módszereket, amelyek elavulttá váltak. Egy pár példa ikonok formátumok: SVG ikonok, betűtípusok, ikonok, CSS sprite, Inlaynovye képet.
Függetlenül attól, hogy a preferenciák igazítsa ikonok erősen függ a kiválasztott formátumra. Például az összes ikonok szerepelnek egyetlen kobold. Ez azt jelenti, hogy az ikonok rögzített méretű (kivéve persze ha nem az első nagy ikonok, majd csökkentse azokat a háttér-size). Ebben az esetben sokkal könnyebb választani a méretet és a line-height a szöveg igazítását ikonok.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
SVG előnye, hogy skálázható, és több időt töltenek a CSS, ahelyett design.
Következtetés: válasszon ki egyet formátum minden ikon, és ennek alapján építeni az utat a szintezés. A kód ebben az esetben sokkal könnyebb lesz, és a tervező (vagy a belső tervező) köszönöm.
Tipp 2: használja az azonos méretű ikonok
Az ideális helyzet az, amikor az ikonok az azonos méretű. Például az összes ikonok 100h100px méretét. Tudjuk, hogy az ikonok méretét, ami nagyban leegyszerűsíti a beállítási folyamatot.
Azt is tudjuk, hogy ez nem mindig. Ikonok lehet elfoglalni különböző terek.
Amikor dolgozik rasztergrafika is fordítson figyelmet a felbontást. Ikonok lehet elfoglalni különböző tereket, de még ennél is fontosabb, hogy megbizonyosodjon arról az ikonok világosak és arányosak.
3. tipp: Válassz egy font-size méretű ikont
Ikonok a legtöbb kezelni betűtípusok. Ezeket használják egy-két, vagy azok helyett, ezért fontos, hogy válasszon az ikonok méretét alatt a szöveg méretét ugyanezen okból, hogy betűket az azonos méretű - ez befolyásolja a szöveg érthetőségét.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
Ez nem azt jelenti, hogy az ikonok legyen 16px arról, ha a szöveg font 16px. Fontos megérteni, hogy az ikonok tökéletesen kiegészíti a szöveget, hogy ők egy kicsit több azonos méretű vagy valamivel kisebb, mint a fő szöveget. Grafikus ábrázolása egy jól összehangolt ikonok és rosszul rendezi az ikonokat.
Annak ellenére, hogy az ugyanabban a sorban mindkét esetben, az ikon a bal oldalon sokkal jobban illik a méret a szöveg és jobban össze kell hangolni, mint a jobb.
4. tipp: finomhangolása a megjelenés CSS
Miután mindent elmondtunk és kész, van egy pontos és egyszerű módja annak, hogy kiegyenlítse az ikonok a szövegben:
A következő bemutató észrevehető különbség a tökéletesen igazodik ikonok és a szöveg és ikonok, amelyek egy kicsit kevésbé igazítva.
5. tipp: A osztály egyes ikonok
A fenti példa nem rossz, de előfordulhat, hogy a helyét a többi ikon található, és távolabb a szöveg, mint a zene ikonra. Ez annyira bosszantó! Itt fogjuk megmenteni CSS, írt kifejezetten erre az ikonra.
Így sokkal jobb!
következtetés
Ha ez nem segít pontosan összehangolni ikonok és a szöveg, nem vagyunk egyedül. Ez mind nagymértékben függ, hogyan hozta létre az ikonok. CSS - meglehetősen egyszerű módon.
Ez a cikk leírja, csak hogy vajon igazolják az ikonok a szövegben, de sok más elemek, mint például a gombok, mezők, menük stb És akkor ott vannak az adaptív tervezése, nem igaz. Annak ellenére, hogy meg kell csinálni, úgy tűnik számomra, megkínált öt tipp segít megbirkózni a feladattal.
Felülvizsgálat: Team webformyself.
HTML5 és CSS3 gyakorlatban nulla az eredmény!
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
