TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

4 Font Awesome Icons Widget Weebly -sivustolle

20

Icons -widget auttaa luomaan silmiinpistävän toimintakehotuksen ja näyttämään kaikenlaista tietoa. Koska valtavia kuvakkeita on saatavana ilmaiseksi eri resursseista, tarvittavat tiedot on helppo esitellä yhdellä houkuttelevalla kuvakkeella pitemmän tekstin sijaan. Erityisesti mahtavat kirjasinkuvakkeet ovat erittäin hyvä vaihtoehto kuville tässä yhteydessä. Tässä artikkelissa tarkastellaan Webbly -sivuston mahtavien kirjasinkuvakkeiden widgetin luomista.

Alla on widget (tyyli 1), jossa on 4 kuvaketta ja voit lisätä tai poistaa kuvakkeita tarpeen mukaan.

Esitellään vielä kolme tyyliä muunnelmilla:

Napsauta alla olevaa latauspainiketta saadaksesi täydellisen koodin kaikille kuvaketyylipaneelin widget -tyyleille. Ja lue lisää tietääksesi kuinka lisätä nämä widgetit Weebly -sivustoosi.

Kuvakkeiden widgetin luominen Weebly -sivustolle

Otetaan esimerkki "Ota yhteyttä" -widgetin luomisesta seuraavilla neljällä vaihtoehdolla:

  • Lähettää sähköpostia
  • Soita meille
  • Keskustele nyt
  • Vieraile foorumilla

Tämä on puhdas CSS -widget, jossa muutamme yksinkertaisen luettelon kuvake -widgetiksi käyttämällä mahtavia fontin kuvakkeita. Jokainen kuvake -widget sisältää seuraavat osat:

  • Paneelisäiliö (tämä sisältää kaikki 4 kohdetta)
  • Sarake – sisältää yksittäisen kohteen
  • Artikkeli – sisältää kuvakkeen ja otsikon
  • Kuvake – mahtava fontti -kuvake
  • H2 -otsikko, joka käyttää oletuksena Weebly -otsikon elementin tyyliä.

Vaihe 1 – Tyylien määrittäminen kuvakewidgetille

Ensin määritämme sarakkeen leveydeksi 21%, jotta 4 kohdetta mahtuu Weebly -teemasi leveyteen. Olemme poistaneet luettelomerkit luettelotyylillä: ei mitään -ominaisuudella ja jokaisella luettelokohdalla on marginaali (alhaalla ja vasemmalla) vasemmalla kelluvana. Voit muuttaa kaikkia näitä tyylejä asettelusi mukaan. Huomaa, että olemme käyttäneet marginaalia 20px luodaksemme tilaa luetteloelementtien väliin.

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

Seuraavaksi luomme paneelit, joiden taustaväri on "vaaleanvihreä", sekä luetteloelementtien tyylit (ul ja li). Käytämme "reunus-säde: 10 pikseliä" Jos haluat luoda paneeleille pyöristetyn kulman, poista tämä viiva, jos haluat näyttää neliön muotoisia kuvakkeita.

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

Seuraava vaihe on määrittää tyylit mahtaville kirjasinkuvakkeille alla kuvatulla tavalla. Olemme käyttäneet kuvakepainikkeiden leveyttä ja korkeutta 130 pikseliä, reunuksen säde 50% saadaksesi ne ympyröimään ja kuvakkeen koon 46 kuvapisteenä. Voit poistaa kuvion neliön muotoon ja lisätä / pienentää kuvakkeen kokoa muuttamalla fonttikokoattribuuttia poistamalla reunasäteen.

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

Keltaista, oranssia, violettia ja punaista väriä käytetään kuvakkeiden hover -väreissä, joita voidaan myös muuttaa tarpeen mukaan. Widgetin CSS -osan viimeinen vaihe on lisätä mediakyselyjä, jotta widget reagoi mobiililaitteisiin.

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

Vaihe 2 – CSS: n lisääminen Weebly -sivustoon

Voit ladata CSS -tiedoston täydellisen lähteen, jonka nimi on "icons_style.css", ja ladata Weebly -sivustollesi kohdasta "Teema> Muokkaa HTML / CSS > Resurssit" (voit myös ladata tiedoston "Tyylit" -osiossa). CSS -tiedostosi ladattu tiedostopolku on " http://yoursite.com/files/theme/icons_style.css ". Tämän CSS -tiedoston lisäksi tarvitsemme myös mahtavan fontin CSS -tiedoston ja sinun on linkitettävä molemmat tiedostot vaaditulle sivulle.

4 Font Awesome Icons Widget Weebly -sivustolle

Lataa tiedosto Weebly Code Editorissa

Siirry nyt sivulle, johon haluat lisätä widgetin, ja linkitä kaksi CSS -tiedostoa alla kohdassa "Sivut> Valitse sivusi> SEO -asetukset> Otsikkokoodi".

4 Font Awesome Icons Widget Weebly -sivustolle

Lisää otsikkokoodi sivulle

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

Vaihe 3 – HTML -koodin lisääminen

Viimeinen vaihe on lisätä vaadittu HTML -koodi Weebly -sivun Upota koodi -elementtiin. Yllä oleva esimerkki on kuvattu “Icons Widget 1.html", jonka saat ladatuista lähdetiedostoista. Napsauta hiiren kakkospainikkeella ja kopioi lähde HTML -koodi ja liitä se "Upota koodi" -elementtiin. Muista poistaa kaksi ensimmäistä CSS -linkkiä esittelyä varten käytetystä HTML -lähdekoodista. HTML -koodin pitäisi näyttää tältä:

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

Kuvakkeiden widgetin mukauttaminen

Kaikki vaaditut tyylit on määritelty "icons_style.css" -tiedostossa, jota voit muokata tarpeidesi mukaan. Olemme lisänneet lähdelataukseen vielä kolme esimerkkiä, joissa käytimme sisäisiä tyylejä tarvittavien elementtien muokkaamiseen pitämällä "icons_style.css" sellaisenaan.

  • Käytä Icon Widget 2.html eri taustoja jokaiselle paneelille.
  • Kokeile Icon Widget 3.html valkoisia taustapaneeleja, joissa on erilaiset liukuvärikuvakkeet.
  • Käytä Icon Widget 4.html sosiaalisten kuvakkeiden kanssa ilman paneelin reunaa.

Voit muuttaa HTML: n tekstiä / kuvakkeita ja valita haluamasi kuvakkeen fontin mahtavien kuvakkeiden luettelosta.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja