Виджет 4 Font Awesome Icons для сайта Weebly
Виджет иконок помогает создать привлекательную панель призыва к действию и отобразить любую информацию. Поскольку есть огромные наборы значков, доступные бесплатно на различных ресурсах, легко продемонстрировать необходимую информацию, используя один привлекательный значок, вместо описания более длинным текстом. В этом контексте иконки font awesome — очень хорошая альтернатива изображениям. В этой статье давайте рассмотрим процесс создания виджета с потрясающими шрифтами для сайта Weebly.
Ниже представлен виджет (стиль 1) с 4 значками, и вы можете добавлять или удалять значки по своему усмотрению.
Давайте еще три стиля с вариациями:
Вы также можете проверить все четыре демонстрации здесь. Нажмите кнопку загрузки ниже, чтобы получить полный код для всех стилей виджета панели значков. И читайте дальше, чтобы узнать, как добавить эти виджеты на свой сайт Weebly.
Создание виджета иконок для сайта Weebly
Давайте рассмотрим пример создания виджета «Связаться с нами» со следующими четырьмя параметрами:
- Отправить электронное письмо
- Позвоните нам
- Теперь говорите
- Посетите форум
Это виджет на чистом CSS, в котором мы конвертируем простой список в виджет значков, используя значки font awesome. Каждый виджет значков содержит следующие части:
- Контейнер панели (содержит все 4 элемента)
- Столбец — содержит отдельный элемент
- Статья — содержащая значок и заголовок
- Icon — иконка font awesome
- Заголовок H2, который по умолчанию использует стиль титровального элемента Weebly.
Шаг 1. Определение стилей для виджета значков
Сначала мы определяем ширину столбца как 21%, чтобы 4 элемента могли уместиться по ширине вашей темы Weebly. Мы удалили маркеры в списках со знаком «стиль списка: нет”И каждый элемент списка будет иметь некоторое поле (нижнее и левое) с плавающим левым полем. Вы можете изменить все эти стили в соответствии с вашим макетом. Обратите внимание, что мы использовали маржу в 20 пикселей, чтобы создать пространство между элементами списка.
/* Individual Column */ .column { display:inline-block; float:left; margin:0 0 20px 20px; list-style:none; width:21%; }
Затем мы создаем панели с общим цветом фона как «светло-зеленый”Вместе со стилями для элементов списка (ul и li). Мы используем «радиус границы: 10 пикселей;”Для создания закругленных углов для панелей, удалите эту линию, если вы хотите отображать квадратные значки.
/* Panel */ #panel { position:relative; z-index:1; } #panel ul li { text-align:center; border:1px solid; } #panel ul li *{ margin:0; padding:0; } #panel ul li .icon { margin-bottom:28px; } #panel ul li article { display:block; padding:30px 0 15px 0; } #panel ul li { color:#464646; background-color: lightgreen; border-color:#D7D7D7; border-radius: 10px; } #panel ul li a { color:inherit; } #panel ul li:hover a { color:#51C4BE; }
Следующим шагом является определение стилей значков font awesome, как показано ниже. Мы использовали ширину и высоту кнопок со значками как 130 пикселей, радиус границы как 50%, чтобы сделать их круговыми, и размер значка как 46 пикселей. Вы можете удалить радиус границы, чтобы значки имели квадратный формат, и увеличить / уменьшить размер значка, изменив атрибут размера шрифта.
/* Button */ .icon { display:inline-block; } .icon i { position:relative; width:130px; height:130px; line-height:130px; z-index:1; } .icon i, .icon i::after { border-radius:50%; } .icon .fa { font-size:46px; } .icon i::after { position:absolute; top:15px; right:15px; bottom:15px; left:15px; border:1px solid; content:""; z-index:-1; } .icon i { color:#FFFFFF; background-color:#51C4BE;/* IE9 Fallback */ background:linear-gradient(to top right, #256D6A, #51C4BE); } .icon i::after { border-color:rgba(255,255,255,.5); } .icon:hover i::after { background-color:#51C4BE; } #panel ul li:hover .icon i { text-shadow:0 1px 0 #CCCCCC,0 2px 0 #333333,0 1px 0 #BBBBBB,0 4px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25) } #panel ul li:nth-child(1):hover .icon i::after { background-color:#F9CD36; /* Yellow */ } #panel ul li:nth-child(2):hover .icon i::after { background-color:#FF7659; /* Orange */ } #panel ul li:nth-child(3):hover .icon i::after { background-color:#9771BD;/* Purple */ } #panel ul li:nth-child(4):hover .icon i::after { background-color:#F36174;/* Red */ }
Желтый, оранжевый, фиолетовый и красный цвета используются для цвета значков при наведении, который также можно изменить в соответствии с вашими потребностями. Последний шаг в части CSS виджета — добавить медиа-запросы, чтобы виджет реагировал на мобильные устройства.
/* Media Queries */ @media screen and (max-width:750px){ #panel ul li { display:inline-block; float:left; width:48.46625766871166%; margin:0 3.06748466257669% 15px 0;} #panel ul li:nth-child(even){ margin-right:0; clear:right; } } @media screen and (max-width: 450px){ #panel ul li { display: block; float: none; width: 95%; } }
Шаг 2 — Добавление CSS на сайт Weebly
Вы можете загрузить полный исходный код файла CSS, который называется «icons_style.css»И загрузите на свой сайт Weebly в разделе«Тема> Редактировать HTML / CSS> Активы»(Вы также можете загрузить файл в разделе«Стили» раздел). Путь к загруженному файлу вашего CSS-файла будет «http://yoursite.com/files/theme/icons_style.css». В дополнение к этому файлу CSS нам также понадобится файл CSS с потрясающим шрифтом, и вам нужно связать оба файла на нужной странице.
Теперь перейдите на страницу, на которую вы хотите добавить виджет, и свяжите два файла CSS, как показано ниже в разделе «Pages> Выберите свою страницу> Настройки SEO> Код заголовка» раздел.

<link href="https://www.webnots.com/files/theme/icons_style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Шаг 3 — Добавление HTML
Последний шаг — добавить необходимый HTML-код в «Код для вставки»На вашей странице Weebly. Приведенный выше пример описан в разделе «Виджет иконок 1.html”Который вы можете получить из загруженных исходных файлов. Щелкните правой кнопкой мыши, скопируйте исходный HTML-код и вставьте его в «Код для вставки”Элемент. Не забудьте удалить первые две ссылки CSS из исходного кода HTML, которые используются в демонстрационных целях. Код HTML должен выглядеть следующим образом:
<div id="panel"> <ul> <li class="column"> <article><a class="icon" href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#"><i class="fa fa-envelope"></i></a> <h2><a href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#">Send Email</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#"><i class="fa fa-phone"></i></a> <h2><a href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#">Call Us</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#"><i class="fa fa-comments"></i></a> <h2><a href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#">Chat Now</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#"><i class="fa fa-group"></i></a> <h2><a href="https://www.webnots.com/font-awesome-icons-widget-for-weebly-site/#">Visit Forum</a></h2> </article> </li> </ul> </div>
Настройка виджета иконок
Все необходимые стили определены в разделе «icons_style.css”Файл, который вы можете настроить в соответствии с вашими потребностями. Мы добавили еще три примера в исходную загрузку, где мы использовали встроенные стили для изменения требуемых элементов, сохраняя «icons_style.css»Как есть.
- Использовать Виджет Icon 2.html для разных фонов для каждой панели.
- Пытаться Виджет значков 3.html для белых фоновых панелей с различными цветными значками градиента.
- Использовать Виджет Icon 4.html с социальными иконками без рамки.
Вы можете изменить текст / значки в HTML и обратиться к списку значков со шрифтами, чтобы выбрать нужный значок.