Att använda ett bildbaserat teckensnitt kan vara ett roligt och snabbt sätt att implementera ikoner på din webbplats. Det är en super enkel process som ger dig fullständig frihet att gå tillbaka och omforma dina ikoner när som helst.
Idag använder vi det utmärkta Pictos-teckensnittet för att bygga en enkel webbsida så att du kan få en känsla för processen.
Använda en teckensnitt för ikoner
Den här veckans designavtal innehåller den fantastiska Pictos-fonten, som innehåller 96 minimala ikoner som bara är perfekta för webbdesign. Det fina med denna typsnitt är att du inte bara får en utskriftsversion, utan också en mapp med olika format som du kan använda på webben.
Vad det här betyder är att vi enkelt kan använda @ font-face för att bädda in Pictos-teckensnittet till en webbplats och sedan använda ikonerna i stället för bilder. Bara om du är lite trött på hur det här görs, ville jag laga en snabb handledning som går igenom en grundläggande implementering av teckensnittet.
Även om du är ganska ny på CSS, borde det vara en bris. På några sätt är det faktiskt enklare än att arbeta med bilder! Låt oss börja.
Grundläggande HTML och CSS
Det första du vill göra är att starta en grundläggande startpaket med en HTML-fil och en CSS-fil. Koden nedan är vad jag brukar börja med.
CSS
För små projekt som detta tycker jag inte om att röra med stora återställningar, om du föredrar något mer omfattande, gärna ta med det.
Kropps CSS
För kroppen är allt vi behöver göra för att ställa in basstorleken och tillämpa en bakgrundsbild. Jag ville ha något subtilt men attraktivt så jag upphörde naturligtvis med Subtle Patterns och laddade ner? Subtile freckles? textur. Den här webbplatsen är fantastisk och blir snabbt en av mina gå till stopp för snabba designresurser.
Allt du behöver göra är att applicera den nedladdade filen till bakgrunden och ställa in den att repetera.
Intro stycke
Det första vi lägger till på sidan är ett intro stycke. Vi tänker oss att vi bygger en sida för en webbapp kallad? Anchorrr ?. Med det i åtanke, sätt in följande HTML.
Som du kan se finns det inte mycket här, bara en behållare med en div som innehåller en rubrik och en paragraf. Låt oss utforma det här för att se bra ut.
Intro avsnitt CSS
För att utforma det här avsnittet börjar vi genom att applicera en bredd och en viss marginal till behållaren. Vi använder bil marginaler för att centrera behållaren i kroppen och överflöd: dold för att hjälpa till att rensa flottorna vi ska använda.
Därefter applicerar vi en bredd till intro div och flyta den till vänster. Jag använde lite stenografi för font egendom för att hålla sakerna snygga och koncisa. Observera att radavstånd har ingen tillhörande enhet, läs mer om det här.
Som du kan se i förhandsvisningen ovan hade jag faktiskt en länk i min version, vilket krävde lite extra styling:
The Big Anchor
Därefter vill vi lägga till en stor bild av ett ankare, som bara händer att bo i vår Pictos-typsnitt. Det första vi behöver göra är att bädda in teckensnittet i vår CSS, sätt sedan ankaret i vår HTML och slutligen utforma det igen i CSS.
Bifoga Pictos-teckensnittet
Lyckligtvis kommer typsnittet faktiskt med ett utdrag specifikt för den här uppgiften, så vårt arbete här är oerhört minimal. Allt du behöver göra är att flytta typfilerna till din projektmapp och klistra in följande i din CSS-fil.
Sätt ankaren i din HTML
Liksom inbäddning av teckensnittet kunde det inte vara enklare att infoga tecknet. Allt vi behöver göra är att titta igenom karaktärskartan nedan för att hitta den bild vi vill ha och skriv sedan bokstaven i en paragraf i vår CSS.
Som du kan se kan ankaren implementeras via små bokstaven? A? i teckensnittet. Så här implementerar vi detta i vår HTML.
Lätt rätt? Ursprungligen kommer det bara att visas som en liten bokstav? A ?, så låt oss hoppa över till vår CSS för att stila den.
Stil ankaren
För att göra vår enkla bokstav till en ikon måste vi se till att teckensnittet är inställt på Pictos-teckensnittet som vi inbäddade tidigare. Observera att eftersom detta faktiskt är typ vi arbetar med kan vi placera ankaren vertikalt via radavstånd fast egendom. Jag lekte med några olika värden tills jag hittade något som såg rätt ut.
Jag har också använt lite CSS3 magi för att göra ankaren snygg. En liten RGBa tillät mig att göra ankaret något transparent och en vit text-shadow ger en aning om en bokstävereffekt.
Med det ser vårt övre avsnitt ganska bra ut! Vårt ankar är på plats och fungerar perfekt.
Skiljelinje
Innan vi börjar nästa avsnitt vill jag skapa en tydlig visuell uppdelning med en solid linje. Eftersom innehållet vi just lagt ut är allt inslaget i en fin behållare, är det ganska lätt att göra med en enkel gräns.
Precis som med ankarikonet har jag kombinerat bottom-gränsen med en skugga för att ge den en lite större dimension.
Resultatet är en enkel och effektiv delare mellan våra två sektioner.
Lägga till de tre kolumnerna
Nästa avsnitt kommer att hålla tre kolumner med text och kommer att simulera dina typiska funktioner? avsnitt på en webbapps webbplats. Naturligtvis vill vi inkludera några visuella signaler, och vårt Pictos-teckensnitt fungerar som det perfekta verktyget för att göra just det.
Funktioner HTML
Det första steget här är att genomföra den grundläggande markeringen för våra tre kolumner. Vi använder tre stycken och toppar var och en med en h3 som kommer att hålla ikonerna. Jag har gått in och valt några bra bokstäver att använda, var god att välja din egen för en annan effekt.
Varje kolumn får samma klass så att vi kan stila dem alla tillsammans och den sista lägger till en extra klass så att vi enkelt kan slå marginalerna av.
Funktioner: Basic CSS
För att börja med CSS-funktionen behöver vi bara några super grundläggande CSS som vi tidigare använde. Vid detta tillfälle borde detta alla göra perfekt mening.
Observera att jag än en gång implementerade Pictos typsnitt, men bara på h3 taggar.
Funktioner: Kolumn CSS
Jag ställde bredden på den här sidan ganska godtyckligt, vilket kan göra implementeringskolumner lite knepiga. Gridsystem använder värden som 960px eftersom de är lätta att dela upp i flera kolumnvariationer.
Men det är ganska lätt att skapa ditt eget kolumnsystem i flygningen. Faktum är att jag täckte detta ämne i en ny artikel. Vi använder samma teknik nedan.
I grund och botten börjar vi med 100% bredd. Om vi vill ha en rättvis marginal på 4% tillämpas på två kolumner som sänker oss till 92%. Vi delar upp det med tre kolumner för att få ungefär 30.66667%, vilket är vår kolumnbredd. Detta distribuerar automatiskt tre kolumner över behållarens bredd.
Som du kan se i förhandsgranskningen nedan kom våra kolumner ganska bra ut. Varje är toppad med en fin liten ikon, vilket ger ett visst visuellt visuellt intresse för sidan.
Demo
Därmed är vår hemsida helt klar. Med bara CSS kunde vi enkelt implementera vackra ikoner, inga bilder krävs! Som du kan föreställa dig kan det vara en stor tidsbesparande att använda denna teknik över en riktigt stor webbplats. Det bästa är att när du laddar in i teckensnittet en gång, är du redo att gå och kan enkelt komma åt någon av ikonerna inom.
Live Demo: Klicka här
Slutsats
Sammanfattningsvis kan du använda ett bildbaserat teckensnitt som Pictos kan vara ett bra knep för att placera ikoner på din webbplats med mycket liten ansträngning. Använd bara @ font-face för att bädda in teckensnittet och sätt in / stil ikonerna precis som du skulle någon annan text.
Om du är intresserad av att få händerna på Pictos-teckensnittet, gå vidare till vår prissida. Var snäll men vårt erbjudande slutar måndag 25 juli!