TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як використовувати чудові значки шрифтів у Weebly?

2

Чудові іконки шрифтів – це масштабовані векторні іконки, спочатку розроблені для використання з фреймворком Bootstrap, а пізніше доступні для інших. Як випливає з назви, значки Font Awesome просто чудові для використання в будь -якому місці вашого сайту для різних цілей. Значки масштабовані, тобто ви можете використовувати одну і ту ж піктограму різного розміру без втрати якості дисплея. На даний момент Weebly пропонує будь -яку опцію за замовчуванням для додавання шрифтів піктограм до елементів вашого сайту. У цій статті ми обговоримо, чому і як використовувати чудові значки шрифтів на веб -сайті Weebly.

Чому ви повинні розглянути можливість використання значків шрифтів?

Існує кілька причин, чому варто розглянути можливість використання значків шрифтів:

  • Іконки можна вільно використовувати для особистого та комерційного використання.
  • Для створення значка вам не потрібні зображення та JavaScript, що покращує час завантаження сайту.
  • Зовнішній вигляд піктограми можна повністю налаштувати за допомогою CSS.
  • Іконки різних розмірів можна використовувати з ідеальною роздільною здатністю.
  • Дуже привабливий на пристроях з дисплеєм сітківки.

Можливо, ви бачите використання значків шрифтів на інших платформах, таких як WordPress, і дивуєтесь, як це можна зробити на веб -сайті Weebly.

Як використовувати чудові значки шрифтів у Weebly?

Хоча існує багато способів використання чудових значків шрифтів, ми пояснимо два прості методи:

  • Використання Bootstrap CDN з будь -яких служб CDN, таких як MaxCDN
  • Розміщення чудових значків шрифтів на вашому власному сайті

Використання Bootstrap CDN

Це найпростіший, надійний і легкий спосіб без жодних проблем використовувати чудові іконки на вашому сайті. Вам потрібно просто зв’язати таку таблицю стилів у розділі заголовка вашої сторінки чи сайту.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Ми рекомендуємо зв’язати таблицю стилів у розділі заголовка будь -якої сторінки на вкладці “Сторінки" перед її розміщенням на веб -сайті. Можливо, ви можете створити тестову сторінку, приховану від пошукових систем, або створити тестовий сайт та зв’язати таблицю стилів у розділі заголовка під Вкладка "Налаштування". Зверніть увагу, що чудові значки шрифтів працюватимуть на безкоштовному веб -сайті Weebly, і для цього немає необхідності в планах преміум -класу.

Хостинг на вашому сайті

Замість того, щоб використовувати Bootstrap CDN CSS, ви також можете завантажити повні файли шрифтів та CSS з домашньої сторінки чудового шрифту на Github. Завантажте всі папки на свій сайт Weebly, відредагувавши вихідний HTML/CSS. Обов’язково завантажте всі типи шрифтів та файлів CSS, як показано на малюнку нижче:

Як використовувати чудові значки шрифтів у Weebly?

Завантажте чудові файли шрифтів у Weebly

Пов’яжіть файл CSS із заголовком потрібної сторінки або на рівні сайту.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

Ви можете використовувати або файл .css, або файл .min.css. Зменшена версія рекомендована для активного сайту, оскільки покращує час завантаження сайту.

Приклади використання значків шрифтів

Після того, як ви вирішили, чи завантажувати таблиці стилів та шрифти, чи використовувати CSN CDN, наступний крок – використовувати їх на своїй сторінці за допомогою елемента «Вставити код».

Давайте візьмемо приклад додавання значка шестірні на вашу сторінку, формат додавання чудового значка шрифту простий, як показано нижче:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

Синтаксис містить три частини:

  • … – кожну піктограму слід використовувати всередині тегу.
  • fa – чудовий префікс класу CSS.
  • fa-phone-square-фактична назва піктограми.

Висновок вищевказаного коду, вставленого всередину елемента "Вставити код", буде таким:

Як використовувати чудові значки шрифтів у Weebly?

Приклад чудового значка шрифту у Weebly

Збільшення розміру значка

Існує п’ять класів CSS для збільшення розміру значка, як показано нижче:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33% <i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x <i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x <i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x <i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Необмежена кількість налаштувань

Як тільки ви візьмете руку за використання значків шрифтів, на сайті з’явиться багато корисних способів їх використання. Наприклад, ви можете додати список, як показано нижче:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List item 1</li> <li><i class="fa-li fa fa-check-square"></i>List item 2</li> <li><i class="fa-li fa fa-check-square"></i>List item 3</li> <li><i class="fa-li fa fa-check-square"></i>List item 4</li> </ul>

Список сподобається нижче:

Як використовувати чудові значки шрифтів у Weebly?

Список значків шрифтів

Ви можете переглянути приклади, щоб перевірити, як легко додати багато функцій на свій сайт за допомогою значків шрифтів. Також швидко зверніться до шпаргалки, щоб швидко отримати назви піктограм. Ви також можете використовувати Unicode замість імені піктограми. Наприклад, у наведеному вище прикладі значка списку замість імені піктограми fa-check-square ви можете використовувати його еквівалентне значення Unicode .

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі