TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Widżet 4 niesamowitych ikon czcionek dla witryny Weebly

2

Widżet Ikony pomaga stworzyć przyciągający wzrok panel z wezwaniem do działania i wyświetlać wszelkiego rodzaju informacje. Ponieważ istnieją ogromne zestawy ikon dostępne za darmo z różnych zasobów, łatwo jest zaprezentować potrzebne informacje za pomocą jednej atrakcyjnej ikony zamiast opisywać dłuższym tekstem. Zwłaszcza niesamowite ikony czcionek są bardzo dobrą alternatywą dla obrazów w tym kontekście. W tym artykule przyjrzyjmy się procesowi tworzenia widżetu wspaniałych ikon czcionek dla witryny Weebly.

Poniżej znajduje się widżet (styl 1) z 4 ikonami i możesz dodawać lub usuwać ikony według potrzeb.

Zaprezentujmy kolejne trzy style z odmianami:

Kliknij poniższy przycisk pobierania, aby uzyskać pełny kod dla wszystkich stylów widżetu panelu ikon. Czytaj dalej, aby dowiedzieć się, jak dodać te widżety do swojej witryny Weebly.

Tworzenie widżetu ikon dla witryny Weebly

Weźmy przykład tworzenia widżetu „Skontaktuj się z nami" z następującymi czterema opcjami:

  • Wysłać email
  • Zadzwoń do nas
  • Porozmawiaj teraz
  • Odwiedź forum

Jest to czysty widżet CSS, w którym konwertujemy prostą listę do widżetu ikon przy użyciu niesamowitych ikon czcionek. Każdy widżet ikon zawiera następujące części:

  • Pojemnik na panel (zawiera wszystkie 4 przedmioty)
  • Kolumna – zawiera pojedynczą pozycję
  • Artykuł – zawierający ikonę i nagłówek
  • Ikona – niesamowita ikona czcionki
  • Nagłówek H2, który domyślnie używa stylu elementu tytułu Weebly.

Krok 1 – Definiowanie stylów widżetu ikon

Najpierw definiujemy szerokość kolumny na 21%, aby 4 elementy mogły zmieścić się na szerokości motywu Weebly. Usunęliśmy punktory z list z właściwością „list-style:none”, a każdy element listy będzie miał margines (dolny i lewy) z lewą stroną pływającą. Możesz zmienić wszystkie te style, aby dopasować je do swojego układu. Zauważ, że użyliśmy marginesu 20px, aby stworzyć odstęp między elementami listy.

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

Następnie tworzymy panele ze wspólnym kolorem tła jako „jasnozielony” wraz ze stylami elementów listy (ul i li). Używamy „border-radius:10px;” aby utworzyć zaokrąglony róg paneli, usuń tę linię, jeśli chcesz wyświetlić kwadratowe ikony.

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

Następnym krokiem jest zdefiniowanie stylów wspaniałych ikon czcionek, jak poniżej. Wykorzystaliśmy szerokość i wysokość przycisków ikon jako 130px, promień obramowania jako 50%, aby były okrągłe, a rozmiar ikony jako 46px. Możesz usunąć promień obramowania, aby ikony były w formacie kwadratowym i zwiększyć / zmniejszyć rozmiar ikony, zmieniając atrybut rozmiaru czcionki.

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

Kolory żółty, pomarańczowy, fioletowy i czerwony są używane dla koloru najechania ikoną, który można również zmienić zgodnie z potrzebami. Ostatnim krokiem w części CSS widgetu jest dodanie zapytań o media, aby widget był responsywny na urządzeniach mobilnych.

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

Krok 2 – Dodanie CSS w witrynie Weebly

Możesz pobrać pełne źródło pliku CSS o nazwie „icons_style.css” i przesłać na swoją witrynę Weebly w sekcji „Motyw > Edytuj HTML / CSS > Zasoby” (możesz również przesłać plik w sekcji „Style”). Ścieżka przesłanego pliku CSS to „ http://twojastrona.com/files/theme/icons_style.css “. Oprócz tego pliku CSS potrzebujemy również niesamowitego pliku CSS czcionki i musisz połączyć oba pliki na wymaganej stronie.

Widżet 4 niesamowitych ikon czcionek dla witryny Weebly

Prześlij plik w edytorze kodu Weebly

Teraz przejdź do strony, do której chcesz dodać widżet, i połącz dwa pliki CSS, jak poniżej, w sekcji „Strony > Wybierz stronę > Ustawienia SEO > Kod nagłówka”.

Widżet 4 niesamowitych ikon czcionek dla witryny Weebly

Dodaj kod nagłówka na stronie

<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">

Krok 3 – Dodanie HTML

Ostatnim krokiem jest dodanie wymaganego kodu HTML do elementu „ Embed Code ” na stronie Weebly. Powyższy przykład jest opisany w „Icons Widget 1.html”, który można pobrać z pobranych plików źródłowych. Kliknij prawym przyciskiem myszy i skopiuj źródłowy kod HTML i wklej go w elemencie „Kod osadzania”. Nie zapomnij usunąć pierwszych dwóch linków CSS z kodu źródłowego HTML, które są używane do celów demonstracyjnych. Kod HTML powinien wyglądać jak poniżej:

<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>

Dostosowywanie widżetu ikon

Wszystkie wymagane style są zdefiniowane w pliku „icons_style.css”, który możesz dostosować do swoich potrzeb. Dodaliśmy kolejne trzy przykłady w pobieraniu źródeł, w których użyliśmy stylów wbudowanych do zmodyfikowania wymaganych elementów, zachowując „icons_style.css” bez zmian.

  • Użyj Icon Widget 2.html dla różnych teł dla każdego panelu.
  • Wypróbuj Icon Widget 3.html dla paneli z białym tłem z różnymi ikonami kolorów gradientu.
  • Użyj Icon Widget 4.html z ikonami społecznościowymi bez obramowania panelu.

Możesz zmienić tekst / ikony w HTML i odnieść się do listy niesamowitych ikon czcionek, aby wybrać potrzebną ikonę.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów