1. Як додати створені іконки до вашого сайту Joomla

Вибір правильних іконок соціальних мереж для вашого сайту важливіший, ніж ви думаєте; ці прості і здавалося б безневинні значки служать як двері в широкий світ, через яку ваш сайт потенційно досягає до мільйонів людей. Ви можете любити або ненавидіти їх, але соціальні медіа є найважливішим компонентом нашої присутності в інтернеті, незалежно від того чи є ви одиноким письменником, провідним блог або уявляєте міжнародну компанію. Імідж вашого бренду, онлайн ідентичність і навіть SEO може залежати від них, тому важливо переконатися, що іконки рівні, чисті, а головне зрозумілі.

У більшості випадків ми фокусуємося на найпопулярніших соціальних сервісах, таких як Facebook, Twitter і Google+. Однак, хоча це і працює добре для багатьох сайтів, різні країни можуть мати свої власні популярні соцмережі, які будуть вимагати інший набір іконок. На щастя, є дуже простий спосіб розширити цю функціональність, щоб включити додаткові іконки.

Perfect Icons - це маленький, але дуже корисний інструмент, який дозволяє генерувати HTML код для широкого кола іконок і визначати посилання для кожної іконки декількома кліками мишки. Звучить чудово? Звісно так! До того ж ви можете налаштувати зовнішній вигляд ваших іконок, змінюючи розмір, інтервал радіусу і кольору, а також вибрати, чи потрібно додати hover-ефекти з чотирьох різних опцій.

Одне з величезних переваг Perfect Icons - відмінний вибір доступних іконок, ви можете створити до 56 іконок соціальних медіа і кілька для елементів загального призначення, таких як електронна пошта або RSS-канали. Список іконок містить майже кожен популярний сайт, який має загальнодоступний профіль, який заслуговує на увагу: Facebook, Twitter, Google+, Pinterest, Foursquare, Skype, Spotify, YouTube, Instagram, WordPress, Blogger, Tumblr, Joomla, Dribble, GitHub і багато інших. Можна встановити однаковий колір для кожної іконки або зберегти оригінальний фон за замовчуванням; ідеально, якщо у вашого сайту є певний колірний стиль, який ви не хочете порушувати. За допомогою параметра радіуса можна створювати круглі або квадратні іконки, підлаштовуючись під дизайн сайту.

Як додати створені іконки до вашого сайту Joomla

Спочатку потрібно відвідати сайт Perfect Icons і вибрати ваш набір іконок. Вкажіть ваші посилання, кольору, hover-ефекти, і інші елементи. Має вийти так:

Потім потрібно завантажити спеціально-підготовлений шрифт, який буде включати в себе наші іконки, просто клікніть на кнопку socicon.zip в правій колонці. Після завантаження розпакуйте архів і скопіюйте всі файли всередині (через FTP або файловий менеджер сервера) такі як socion.eot, socicon.svg etc. в директорію fonts / вашого шаблону. Правильний шлях, як правило:

Нарешті прийшов час скопіювати код, який знаходиться під кнопкою завантаження. Цей CSS код слід копіювати в .css файл стилів вашого шаблону (ім'я залежить від того, яке ви використовуєте), який знаходиться в templates / templat_ename / css / директорії. Краще додавати стилі в самий кінець файлу. ВАЖЛИВО: У скопійованому CSS коді замініть все PATH_TO на ../fonts

Після цих трьох кроків наш шрифт готовий до використання, і варто лише опублікувати іконки десь, щоб побачити, як вони виглядають. Для цього можна використовувати Joomla's Custom HTML module. Просто скопіюйте код з кроку 3 в керівництві на сайті Perfect Icons в редактор контенту. От і все!

Якщо ви не можете побачити вміст призначеного для користувача HTML модуля після збереження, то швидше за все це через ваш налаштувань редактора очищення HTML. Слід відключити editor filtering.

З англійської переклала Вікторія Павлова .
оригінал статті https://www.gavick.com/magazine/the-easiest-way-to-create-multiple-resolution-independent-social-icons.html