Pictogramele minunate de font nu funcționează. Începutul lucrării. Crearea de icoane alungite

fa-camera-retro

Crearea de pictograme mai mari

Pentru a mări dimensiunea pictogramelor, puteți utiliza clasele fa-lg (creștere cu 33%), fa-2x, fa-3x, fa-4x sau fa-5x.

fa-lg fa-2x fa-3x fa-4x fa-5x

Crearea pictogramelor cu lățime fixă

Pictogramele cu lățime fixă ​​sunt foarte utile atunci când se creează meniuri de navigare sau diverse liste. Pentru a crea astfel de pictograme, utilizați clasa fa-fw.

Pictograme pentru liste cu marcatori

Folosind clasele fa-ul și fa-li, puteți înlocui marcatoarele standard din listele neordonate cu alte pictograme.

• Icoane minunate
• poate fi folosit
• ca niște markeri
• liste neordonate

• Icoane minunate
• poate fi folosit
• ca niște markeri
• liste neordonate

Crearea de icoane alungite

Pentru a crea citate „întinse” sau pictograme pentru articole, utilizați clasele fa-border și pull-right sau pull-left.

...Creativitatea înseamnă pur și simplu realizarea de conexiuni între lucruri. Când oamenii creativi sunt întrebați cum au făcut ceva, se simt puțin vinovați pentru că de fapt nu au făcut nimic, ci doar au observat. Acest lucru devine clar pentru ei în timp. Au putut să conecteze diferite părți din experiența lor și să sintetizeze ceva nou. Acest lucru se întâmplă pentru că au experimentat și văzut mai mult decât alții sau pentru că se gândesc mai mult la asta.

...Creativitatea înseamnă pur și simplu realizarea de conexiuni între lucruri. Când oamenii creativi sunt întrebați cum au făcut ceva, se simt puțin vinovați pentru că de fapt nu au făcut nimic, ci doar au observat. Acest lucru devine clar pentru ei în timp. Au putut să conecteze diferite părți din experiența lor și să sintetizeze ceva nou. Acest lucru se întâmplă pentru că au experimentat și văzut mai mult decât alții sau pentru că se gândesc mai mult la asta.

Crearea pictogramelor rotative

Pentru a crea o pictogramă rotativă, utilizați clasa fa-spin.

Crearea pictogramelor rotite și răsturnate

Pentru a roti și răsturna pictogramele, utilizați următoarele clase fa-rotate-* și fa-flip-*.

pictograma




pictogramă reflectată vertical

pictograma
pictograma rotită cu 90 de grade în sensul acelor de ceasornic
pictograma rotită cu 180 de grade în sensul acelor de ceasornic
pictograma rotită la 270 de grade în sensul acelor de ceasornic
pictograma reflectată orizontal
pictogramă reflectată vertical

Pictograme suprapuse una peste alta

Pentru a stivui mai multe pictograme una peste alta, utilizați clasa „fa-stack” de pe elementul părinte, clasa „fa-stack-1x” pentru pictograma din prim-plan și clasa „fa-stack-2x” pentru fundal planul pictogramei. Clasa „fa-inverse” poate fi folosită pentru a inversa culoarea unei pictograme.

Pictograma Twitter pe pictograma pătrată
pictograma „steagul” pe o pictogramă „cerc”.
pictograma terminal pe pictograma pătrată
Pictograma „Interzis” de pe pictograma „camera”.

Pictograma Twitter pe pictograma pătrată
pictograma „steagul” pe o pictogramă „cerc”.
pictograma terminal pe pictograma pătrată
Pictograma „Interzis” de pe pictograma „camera”.

Astăzi, internetul este plin de diverse fonturi „pictograme”, cu care puteți adăuga cu ușurință pictograme pe site-urile dvs. web.
Navigare articol:

Ce este Font Awesome

Font Awesome este un set de instrumente pentru font și CSS conceput pentru a pune pe site-urile dvs. o varietate de pictograme bazate pe vectori, ușor de personalizat.

Tot ce poate fi personalizat Ajutor CSS— poate fi aplicat pictogramelor Font Awesome din proiectele dvs. Unul dintre cele mai importante avantaje ale acestor fonturi este că se afișează clar și frumos la diferite dimensiuni. Dacă o pictogramă png obișnuită cu fundal transparent sau chiar mai rău, pictograma jpg nu va arăta foarte bine când este mărită (vor apărea efecte de estompare și neclaritate), atunci pictograma fontului va menține calitatea perfectă. În același timp, la fel ca în orice font, o listă de simboluri este predeterminată, așa că în Font Awesome este predeterminată o listă de pictograme gata făcute selectate dintre cele mai frecvente pictograme necesare.

Modalități de a adăuga propriile pictograme

În fiecare zi, serviciul Font Awesome primește zeci de solicitări de la utilizatori și companii pentru a-și adăuga pictogramele în biblioteca serviciului. Există mai mulți factori care influențează decizia pozitivă a unui serviciu de a adăuga pictograme noi. Una dintre principalele este frecvența solicitărilor, cu alte cuvinte, popularitatea. Dar chiar dacă pictograma propusă se potrivește perfect din toate punctele de vedere și este necesară pentru toată lumea, nu o veți putea vedea în biblioteca generală. Cel puțin, va trebui să așteptați ca actualizarea Font Awesome să apară. De regulă, aveți nevoie de o pictogramă acum; există mai multe moduri de a face acest lucru. Mai jos sunt cele mai potrivite.

Modul complicat de a edita fontul Awesome

1. Bifurcați depozitul Font Awesome. Veți avea nevoie de un mediu de dezvoltare configurat corespunzător.
2. Hackează fișierul font FontAwesome.otf. Puteți folosi această instrucțiune: crearea Octicons (în engleză).
3. Distribuie firul tău comunității Font Awesome. Verifică disponibilitatea probleme deschise legate de ramura dvs. și partajați depozitul dvs.

O modalitate ușoară de a face modificări la Font Awesome

Sunt câteva serviciu online ovs care vă permit să personalizați Font Awesome. Iată cele mai populare:

• Fort Awesome: https://fortawesome.com/ (de la @davegandy, creatorul Font Awesome) - Serviciu cu plată, de la creatorul Font Awesome, perioadă de probă - 14 zile.
• Fontello: http://fontello.com/ - Serviciu gratuit, convenabil dacă trebuie să schimbați setul de pictograme o dată.
• IcoMoon: http://icomoon.io/app/#/select - Un serviciu online care oferă multe opțiuni diferite pentru editarea și adăugarea pictogramelor. Gratuit.
• Fontastic: http://fontastic.me/ - Un alt serviciu, este posibil să generați sprite-uri svg, există înregistrarea și gestionarea fonturilor dumneavoastră. Gratuit.

Puteți folosi oricare dintre cele sugerate, este rapid și ușor. eu personal Recomand IcoMooon. L-am folosit în ultima vreme și în acest articol voi descrie mai detaliat cum să folosesc IcoMoon.

Adăugarea pictogramelor prin Icomoon

IconMon este un serviciu online pentru crearea propriilor fonturi din pictograme pentru utilizare pe site-uri web sau în aplicații mobile și desktop. Să presupunem că aveți Font Awesome conectat și trebuie să adăugați pictograme din alte fonturi sau chiar propria pictogramă cu logo-ul dvs. Pentru a face acest lucru, creați un nou proiect în IconMon, importați fontul Font Awesome în el și, dacă este necesar, alte fonturi sau propriile pictograme sub formă de fonturi/imagini svg. Apoi descărcați fontul rezultat și îl utilizați în aplicația dvs. în loc de Font Awesome. Mai jos vă voi arăta cum să faceți acest lucru pas cu pas.

IconMon: Noțiuni introductive

Publicarea unui set gata făcut de pictograme Iconmoon pe site

După descărcarea arhivei, o puteți conecta la site-ul dvs. web în loc de Font Awesome și puteți utiliza pictogramele din acest set, inclusiv propria pictogramă. Pentru a ne conecta la site, vom avea nevoie de fișiere din folderul fonturi și style.css - încărcați-le pe site-ul nostru (dacă este necesar, style.css poate fi redenumit sau chiar adăugat conținut din acesta în fișierul dvs. css, care a fost folosit pe site-ul nostru). site-ul mai devreme). Vă rugăm să rețineți că prin plasarea fontului și css pe site-ul dvs. web, calea relativă către fonturile din fișierul css se poate modifica. Prin urmare, deschide-l pe cel deja încărcat pe site-ul tău cod cssși asigurați-vă că sunt specificate căile corecte pentru fonturi. Aici am evidențiat cu roșu locul unde trebuie să verificați căile.

@font-face (
familie de fonturi: "icomoon";
src: url("fonts/icomoon.eot?29mi8v");
src: url("fonts/icomoon.eot?29mi8v#iefix") format ("embedded-opentype"),
url("fonts/icomoon.ttf?29mi8v") format ("truetype"),
url("fonts/icomoon.woff?29mi8v") format("woff"),
url("fonts/icomoon.svg?29mi8v#icomoon") format("svg");
greutatea fontului: normal;
stil font: normal;

După ce ați transferat cu succes fișierele iconmon pe site-uri, puteți utiliza pictogramele în acest fel:

Acasă

Cum să vă actualizați setul de pictograme în viitor

Așadar, am creat, conectat și folosim fontul nostru personalizat Iconmon, în care avem propriile pictograme și Font Awesome și orice altele. Am făcut o treabă bună la generarea acestui font; ne-a luat mult timp să scriem numele pictogramelor, să setăm culorile și să le editam. Și acum mai avem unul pictogramă nouăși vrem să-l adăugăm la acest font al nostru. Iconmon oferă 3 opțiuni pentru a rezolva această problemă:

1. Stocarea proiectelor dvs în norul Iconmon- Acest serviciu cu plată. Când vă înscrieți pentru Iconmon, puteți alege un abonament, puteți plăti pentru el, iar design-urile fonturilor dvs. vor fi stocate în contul dvs. Puteți oricând să le schimbați, să instalați o versiune superioară, să descărcați și să utilizați.
2. Daca nu ai curatat memoria cache a browserului, atunci proiectele dvs. vor rămâne și atunci când vă conectați din nou la IconMon și puteți adăuga cu ușurință o nouă pictogramă suplimentară la proiect și puteți salva fontul actualizat. Problema principală este că, odată ce ștergeți memoria cache a browserului, totul va fi șters.
3. Setările proiectului în fișierul selection.json- varianta cea mai potrivita pentru noi. În primul rând, este gratuit. Descărcați acest fișier într-o arhivă cu fontul de fiecare dată când îl generați.
   Păstrați acest fișier și, în viitor, puteți accesa IconMo și vă puteți importa proiectele prin intermediul acestuia.

Concluzie

Pot exista modalități mai convenabile de a adăuga propriile pictograme la Font Awesome, dar acestea fie sunt plătite, fie necesită cunoștințe tehnice mai aprofundate. Aceeași metodă folosind IconMon este simplă, gratuită și destul de convenabilă. Dacă aveți dificultăți, atunci bine ați venit la comentarii. Voi fi bucuros să vă ajut.

Aici puteți descărca unic Șabloane Blogger. Subiectele din această colecție sunt mai avansate Optimizare SEO.

Limbi: engleză rusă.

Tipuri: Știri, Revista, Blog, Minimalism, Portofoliu, O pagină, Galerie, Grilă, Magazin online, Cărți de vizită, Site-uri corporative.

Subiecte: Sport, Fotografii, Jocuri, Gătit, Stil și Modă, Femei, Copii, Mașini, Sănătate, Călătorii, Turism, Design, Renovare locuințe, Interior, Natură, Animale, Dans, Video, Muzică, Politică, Economie, Afaceri, Forex, Artă, Imagini, Tapet, Câștiguri, Imobiliare, Pescuit, Vânătoare, Software, Software, Aplicații de jocuri Android.

Tehnologii: Jquery, AMP, Bootstrap, Ajax, Javascript, Design receptiv.

Cele mai bune șabloane de bloggeri, alegerea utilizatorilor

UberSpot este o soluție excelentă pentru cei cărora le pasă Design frumos, Optimizare SEOși funcționalitate eficientă. În această temă veți găsi o serie de produse noi interesante și productive, de exemplu, un nou widget pentru Instagram, hărți site-uri, publicații, comentarii etc. Puteți utiliza, de asemenea, două tipuri diferite machete.

„Cuceritor de nișă” de neoprit. Aceasta este soluția ideală pentru site-uri cu o singură temăși bloguri. Ideea la crearea temei a fost implementarea unei navigații fără sfârșit, a cărei mișcare ar putea fi urmărită de motoarele de căutare. Prin urmare sistem nou Navigarea, spre deosebire de cele anterioare, nu va crește doar factorul comportamental, ci îl va și afișa pe deplin, ceea ce va presupune o creștere a poziției site-ului în căutare.

Proiectat pe baza noilor teme Blogger din serie (CNES). Capabil să rezolve multe sarcini atribuite. Îl puteți folosi cu toate widget-urile sau parțial ca unul personal blog de informatii. Viteza de încărcare a paginii vă va surprinde plăcut.

BlogBoard este unul dintre cele mai bune grile din 2018. Combină mai multe stiluri simultan. Poate fi folosit ca magazin online de blog. Va face o treabă grozavă de a vă prezenta abilitățile și serviciile, așa că este potrivit și pentru un portofoliu.

Dionis are un tip simplificat de livrare a mesajelor. Potrivit pentru orice nișe și povești. Printre caracteristici putem evidenția un preloader frumos (imagine animată înainte de încărcare pagina principala), postările recomandate apar în partea dreaptă pe măsură ce derulați pagina.

Acesta este un model rapid și flexibil care a absorbit mai multe completări din rețelele sociale. Opțiune grozavă pentru cei care își prețuiesc timpul. Tradus în rusă.

Mistik are patru stiluri diferite. Îl poți alege pe cel care îți place cel mai mult. Personalizarea ușoară a meniurilor, culorilor și altor elemente vă permite să vă creați propriul design unic.

NewsB este o temă de știri ușoară, cu o schemă combinată de culori, widget-uri simple și în același timp elegante create pentru diverse subiecte și categorii de conținut. NewsB este pe deplin receptiv și susținut fără probleme de toată lumea browsere moderne. Versiunea completa include cele mai recente setări SEO pentru bloggeri de astăzi, care vor permite site-ului dvs. să-și crească clasamentul motoare de căutare superior.

Minima Mag este un modern șablon de știri, Cu design adaptiv, încărcare rapidă a mesajelor, gadgeturi elegante și, bineînțeles, cu un design curat care combină perfect trei culori, ceea ce face, în cele din urmă, Minima Mag îngrijit și elegant.

O temă uimitoare cu un stil clasic conceput pentru site-uri web și bloguri pentru femei. Avicia este o temă profesională cu un design elegant și modern care poate inspira și transmite doar emoții pozitive cititorilor.

Dream Press, este printre cele mai bune teme pentru bloggeri. În ea veți vedea un design modern, elegant, stilat și simplu. În general, toate aceste calități vor ajuta la menținerea cititorului pe site.

Singurul lucru pe care trebuie să-l știți despre ExGPress este că are cea mai convenabilă funcționalitate pentru a se potrivi rețea socială, care va oferi site-ului dvs. un procent ridicat de returnări. La tot ce puteți adăuga optimizare SEO, de mare viteză descărcări și o cantitate mare de spațiu pentru gadget-uri și publicitate. ExGPress a fost dezvoltat special pentru vizualizarea confortabilă a conținutului și cea mai bună interacțiune cu motoarele de căutare, acesta este ceea ce îl face unul dintre cele mai bune șabloane pentru blogger de azi. Zilele trecute i-au adăugat optiune noua, bare laterale plutitoare, când derulați pagina în jos sau în sus, barele laterale cu widget-uri se deplasează odată cu derularea.

Grid Line este un șablon blogspot modern și elegant. Toate elementele sale sunt atent selectate, optimizate și aranjate astfel încât să maximizeze atenția cititorului asupra conținutului. Grid Line a fost creată nu numai pentru promovare de succes resursa dvs. web în motoarele de căutare, dar și pentru a ridica moralul utilizatorilor și cititorilor săi.