Виджет 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. Мы удалили маркеры в списках со свойством «list-style: none», и каждый элемент списка будет иметь некоторое поле (нижнее и левое) с плавающим слева. Вы можете изменить все эти стили в соответствии с вашим макетом. Обратите внимание, что мы использовали маржу в 20 пикселей, чтобы создать пространство между элементами списка.

/* Individual Column */
.column {
display:inline-block;
float:left;
margin:0 0 20px 20px;
list-style:none;
width:21%;
}

Затем мы создаем панели с общим цветом фона как «светло-зеленый» вместе со стилями для элементов списка (ul и li). Мы используем «border-radius: 10px;» для создания закругленных углов для панелей удалите эту линию, если вы хотите отображать квадратные значки.

/* 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 с потрясающим шрифтом, и вам нужно связать оба файла на нужной странице.

Загрузить файл в редакторе кода Weebly

Теперь перейдите на страницу, на которую вы хотите добавить виджет, и свяжите два файла CSS, как показано ниже в разделе «Страницы> Выберите свою страницу> Настройки SEO > Код заголовка».

Добавить код заголовка на страницу

<link href="/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="#"><i class="fa fa-envelope"></i></a>
<h2><a href="#">Send Email</a></h2>
</article>
</li>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-phone"></i></a>
<h2><a href="#">Call Us</a></h2>
</article>
</li>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-comments"></i></a>
<h2><a href="#">Chat Now</a></h2>
</article>
</li>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-group"></i></a>
<h2><a href="#">Visit Forum</a></h2>
</article>
</li>
</ul>
</div>

Настройка виджета иконок

Все необходимые стили определены в файле «icons_style.css», который вы можете настроить по своему усмотрению. Мы добавили еще три примера в исходный код, где мы использовали встроенные стили для изменения требуемых элементов, сохранив «icons_style.css» как есть.

• Используйте Icon Widget 2.html для разных фонов для каждой панели.
• Попробуйте Icon Widget 3.html для панелей с белым фоном и значками разных цветов градиента.
• Используйте Icon Widget 4.html с социальными значками без рамки.

Вы можете изменить текст / значки в HTML и обратиться к списку значков со шрифтами для выбора нужного значка.