În timpul structurii layout-urilor, este adesea necesar să se plaseze o mică pictogramă lângă textul link-ului. Orice designer bun de aspect ar dori să facă o astfel de icoană o parte integrantă a link-ului. Cea mai obișnuită metodă pentru rezolvarea acestei probleme este de a pune o pictogramă pe fundalul linkului și de a adăuga o legătură de umplutură. Din păcate, această metodă impune restricții asupra imaginii folosite ca pictogramă. Dacă vrem să folosim o sprite pentru toate pictogramele, atunci spațiul dintre pictograme depinde de mărimea legăturilor. Cu un număr mare de icoane, un sprite poate avea dimensiuni foarte impresionante și adesea cea mai mare parte a imaginii este goală. Puteți, desigur, salva fiecare pictogramă ca fișier separat, dar fiecare astfel de fișier va crește timpul de încărcare a paginii. Ca rezultat, suntem obligați să căutăm un echilibru între dimensiunea și numărul de imagini folosite. Sarcina devine mult mai complicată, pe măsură ce noi imagini sunt adăugate la pagină.
Stânga - vechea versiune a sprite. De fapt, toate pictogramele din acesta sunt aranjate vertical într-un rând, mai degrabă decât în două rânduri, ca în imagine
Propun o nouă metodă, care face posibilă utilizarea optimă a fișierului sprite și, în același timp, nu limitează dimensiunea legăturilor. Această metodă se bazează pe utilizarea pseudo-elementului: înainte. Suportul pentru acest pseudo-element este în toate browserele moderne. IE7 browser-ul modern, nu credem, pur și simplu nu apare icoane. Deci, să începem.
Mai întâi, vom crea un sprite cu toate icoanele de care avem nevoie. Nu contează în ce ordine sunt plasate. Ca exemplu pentru acest articol, am ales mai multe icoane din setul popular de la Fat Cow Hosting:
Sprite-ul meu pentru demonstrarea metodei
Vă recomandăm să lăsați 1-2 pictograme goale între pictograme, altfel când textul este mărit de browser, marginile pictogramelor învecinate vor cădea în zona vizibilă.
Mai întâi, creați o clasă de bază .icon pentru toate pictogramele:
Acum deschideți serviciul SpriteCow. încărcați-l în sprite, stabiliți coordonatele tuturor pictogramelor și creați pentru fiecare clasă individuală aceste coordonate. Serviciul oferă nu numai coordonate, ci și dimensiuni și alte proprietăți, dar nu avem nevoie de toate acestea.
Utilizatorii care utilizează mai puțin sau sass pot include o clasă comună .icon în fiecare dintre clasele de pictograme specifice, după care numai ultimul va fi adăugat, de exemplu, în clasa = "icon-youtube" în loc de class = "icon icon-youtube"
Pentru a demonstra utilizarea acestei clase, creați un buton pentru trimiterea e-mailului:
Acum, în butonul nostru putem folosi oricare dintre pictogramele deja definite, adăugând la acesta clasele de pictograme și clasa cu coordonatele pictogramei. O pagină cu exemple de link-uri cu icoane poate fi vizualizată aici.
Trimiteți-le prietenilor: