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

Віджет 4 шрифтів – чудові іконки для сайту Weebly

0

Віджет піктограм допомагає створити привабливий заклик до дії та відображати будь -яку інформацію. Оскільки величезні набори іконок доступні безкоштовно з різних ресурсів, легко продемонструвати необхідну інформацію за допомогою однієї привабливої ​​піктограми, а не описувати її довшим текстом. Особливо чудові значки шрифтів є дуже хорошою альтернативою зображенням у цьому контексті. У цій статті давайте розглянемо процес створення віджета чудових значків шрифтів для сайту Weebly.

Нижче наведено віджет (стиль 1), що містить 4 піктограми, і ви можете додавати або видаляти значки, як вам потрібно.

Давайте продемонструємо ще три стилі з варіаціями:

Натисніть на кнопку завантаження нижче, щоб отримати повний код для всіх стилів віджета панелі значків. І читайте далі, щоб дізнатися, як додати ці віджети на свій сайт Weebly.

Створення віджетів іконок для сайту Weebly

Давайте візьмемо приклад створення віджета "Зв’яжіться з нами" з наступними чотирма варіантами:

  • Відправити лист
  • Зателефонуйте нам
  • Чат зараз
  • Відвідайте форум

Це чистий віджет CSS, де ми перетворюємо простий список у віджет значків за допомогою чудових значків шрифтів. Кожен віджет значків містить такі частини:

  • Панельний контейнер (містить усі 4 елементи)
  • Стовпець – містить окремий елемент
  • Стаття – містить піктограму та заголовок
  • Значок – чудовий значок шрифту
  • Заголовок H2, який за замовчуванням використовує стиль елемента заголовка Weebly.

Крок 1 – Визначення стилів для віджета значків

Спочатку ми визначаємо ширину стовпця як 21%, щоб 4 елементи могли розміститися на ширині вашої теми Weebly. Ми видалили маркери зі списків із властивістю «list-style: none», і кожен елемент списку матиме певне поле (нижнє та ліве) з плаваючим лівим краєм. Ви можете змінити всі ці стилі відповідно до вашого макета. Зауважте, що ми використовували margin 20px для створення простору між елементами списку.

/* 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; }

Наступним кроком є ​​визначення стилів чудових значків шрифтів, як показано нижче. Ми використовували ширину та висоту кнопок піктограм як 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 зі шрифтом, і вам потрібно зв’язати обидва файли на потрібній сторінці.

Віджет 4 шрифтів - чудові іконки для сайту Weebly

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

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

Віджет 4 шрифтів - чудові іконки для сайту Weebly

Додайте код заголовка на сторінку

<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 для панелей білого фону з різними піктограмами кольору градієнта.
  • Використовуйте віджет значків 4.html із соціальними іконками без рамки панелі.

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

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

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