TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

4 Font Awesome Icons Widget for Weebly Site

7

Ikoner -widget hjelper deg med å skape et iøynefallende oppfordring til handlingspanel og vise all slags informasjon. Siden det er enorme ikonsett gratis tilgjengelig fra forskjellige ressurser, er det enkelt å vise frem nødvendig informasjon ved å bruke et enkelt attraktivt ikon i stedet for å beskrive med lengre tekst. Spesielt skrifttype -ikoner er et veldig godt alternativ til bilder i denne sammenhengen. I denne artikkelen la oss utforske prosessen med å lage en fantastisk widget for ikoner for font for Weebly -området.

Nedenfor er widgeten (stil 1) med 4 ikoner, og du kan legge til eller fjerne ikonene etter behov.

La oss vise frem ytterligere tre stiler med variasjoner:

Klikk på nedlastningsknappen nedenfor for å få den komplette koden for alle ikonene for panelpanel -widgeten. Og les videre for å vite hvordan du legger til disse widgetene på ditt Weebly -nettsted.

Opprette ikoner -widget for Weebly -nettsted

La oss ta et eksempel på å lage en "Kontakt oss" -modul med følgende fire alternativer:

  • Send e-post
  • Ring oss
  • Chat nå
  • Besøk forum

Dette er en ren CSS -widget hvor vi konverterer enkel liste til en ikonwidget ved hjelp av fantastiske skrifttyper. Hver ikon -widget inneholder følgende deler:

  • Panelbeholder (dette inneholder alle 4 elementene)
  • Kolonne – inneholder individuelt element
  • Artikkel – som inneholder et ikon og en overskrift
  • Ikon – fantastisk ikon
  • H2 -overskrift som som standard bruker stilen til Weebly -tittelelementet.

Trinn 1 – Definere stiler for ikoner -widgeten

Først definerer vi bredden på kolonnen som 21% slik at fire elementer kan passe på bredden til Weebly -temaet. Vi har fjernet kulene i listene med "list-style: none" -egenskapen, og hvert listeelement vil ha en viss margin (nederst og venstre) med venstre flytende. Du kan endre alle disse stilene slik at de passer til oppsettet ditt. Vær oppmerksom på at vi har brukt marg 20px for å lage mellomrom mellom listeelementer.

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

Deretter lager vi paneler med felles bakgrunnsfarge som "lysegrønn" sammen med stiler for listeelementer (ul og li). Vi bruker “border-radius: 10px;" for å lage avrundet hjørne for paneler, fjern denne linjen hvis du vil vise firkantede ikoner.

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

Neste trinn er å definere stilene for de fantastiske ikonene for skrifttypen som nedenfor. Vi har brukt bredden og høyden på ikonknappene som 130px, kantradius som 50% for å få dem til å sirkle og størrelsen på ikonet som 46px. Du kan fjerne kantradien for å lage ikonene i firkantet format og øke / redusere størrelsen på ikonstørrelsen ved å endre skriftstørrelsesattributtet.

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

Gule, oransje, lilla og røde farger brukes til ikonene som svever farge, som også kan endres etter behov. Det siste trinnet i CSS -delen av widgeten er å legge til mediespørsmål for å gjøre widgeten responsiv på mobile enheter.

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

Trinn 2 – Legge til CSS i Weebly Site

Du kan laste ned hele kilden til CSS -filen som heter "icons_style.css" og laste opp på Weebly -nettstedet ditt under "Tema> Rediger HTML / CSS > Eiendeler" (du kan også laste opp filen under "Stiler" -delen). Den opplastede filbanen til CSS -filen din vil være " http://yoursite.com/files/theme/icons_style.css ". I tillegg til denne CSS -filen trenger vi også en fantastisk CSS -fil med skrift, og du må koble begge filene på den nødvendige siden.

4 Font Awesome Icons Widget for Weebly Site

Last opp fil i Weebly Code Editor

Gå nå til siden du vil legge til widgeten, og koble de to CSS -filene som vist under "Sider> Velg siden> SEO -innstillinger> Overskriftskode" -delen.

4 Font Awesome Icons Widget for Weebly Site

Legg til topptekst på siden

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

Trinn 3 – Legge til HTML

Det siste trinnet er å legge til den nødvendige HTML -koden i elementet " Embed Code " på Weebly -siden din. Eksemplet ovenfor er dekket av “Icons Widget 1.html” som du kan få fra de nedlastede kildefilene. Høyreklikk og kopier kilde -HTML -koden og lim den inn i "Embed Code" -elementet. Ikke glem å fjerne de to første CSS -koblingene fra HTML -kildekoden som brukes til demoformål. HTML -koden skal se slik ut:

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

Tilpasse ikoner -widget

Alle de nødvendige stilene er definert i filen "icons_style.css" som du kan tilpasse etter behov. Vi har lagt til ytterligere tre eksempler i kildelastingen der vi brukte innebygde stiler for å endre de nødvendige elementene ved å beholde “icons_style.css” som den er.

  • Bruk Icon Widget 2.html for forskjellige bakgrunner for hvert panel.
  • Prøv Icon Widget 3.html for hvite bakgrunnspaneler med forskjellige fargeovergangsikoner.
  • Bruk Icon Widget 4.html med sosiale ikoner uten panelgrense.

Du kan endre teksten / ikonene i HTML og referere til de fantastiske ikonene i fontene for å velge ikonet du trenger.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon