Към момента на налагане оформление често е необходимо да се поставят в непосредствена близост до текста на връзката, малка икона. Всеки добър програмист иска да направи такава неразделна част от иконите връзки. Най-честият начин за решаване на този проблем - да се сложи икона във фонов режим и да добавите връзки връзка подложка. За съжаление, тази техника налага ограничения върху изображението, за да бъдат използвани като икони. Ако искаме да използваме спрайт за всички икони, маржа между икони в зависимост от размера на връзките. С голям брой икони един спрайт може да има много впечатляващи размери, често голяма част от изображението е празен. Можете, разбира се, всяка икона, за да запазите отделен файл, но файлът ще се увеличи всеки път, когато страницата е заредена. В резултат на това, ние трябва да се търси баланс между размера и броя на използваните изображения. Задачата се усложнява, докато добавяте нови графики на страницата.
Предлагам нов метод, който позволява да се използва оптимално файла спрайт, и по този начин не ограничава размера на връзките. Методът се основава на използването на псевдо-елементи: преди. Подкрепа за тази псевдо-елемент присъства във всички модерни браузъри. IE7 модерен браузър, ние не вярваме, то просто иконите не се показват. Да започваме.
Първо, създаване на Спрайт с всички ни необходими икони. Няма значение последователността, в която са поставени. Като пример за тази статия, аз избрах няколко икони на популярният набор от Fat Cow хостинг:
Моят спрайт да демонстрира метода
Препоръчвам оставяйки между икони 1-2 празно пиксел, в противен случай с увеличение на текста на браузъра означава прилежащите икони ще бъдат във видимата област.
Първо, създаване на базов клас за всички икони .icon:
Сега отворете услугата SpriteCow. Ние качване и изтегляне на нашите спрайт определи координатите на всички икони и да се създаде отделен клас за всяка от тези координати. Сама по себе си осигурява не само координати, но и от размера и други свойства, но ние все още не се нуждаят от нея.
Късметлиите, които използват по-малко или дързост, могат да включват обща .icon клас във всеки един от класовете на конкретни икони, след което връзката ще бъде достатъчно, за да добавите само последният пример клас = "икона на YouTube," вместо клас = "икона-младост"
За да се докаже използването на този клас ще създаде един бутон за изпращане на поща:
Сега нашия бутон можем да използваме една от иконите вече са определени, като към нея икона блок класове и класа с координатите на най-много икони. Страница с примери за връзки с икони може да се намери тук.