Var du kan hitta ikontypsnitt<\/h2>\n
Det finns numera m\u00e5nga bra st\u00e4llen att hitta ikontypsnitt f\u00f6r din WordPresswebbplats.\u00a0Skriv bara in ”ikontypsnitt” i Google och du kommer att f\u00e5 flera bra resultat. En av de mest popul\u00e4ra och mest anv\u00e4nda \u00e4r Font Awesome<\/a>. I skrivande stund har de 1 400+ gratis ikoner, samt 4 500+ ikoner i sin pro-version. Detta inkluderar ikoner f\u00f6r n\u00e4stan allt, fr\u00e5n gr\u00e4nssnitt, till sociala medier, pilar, och m\u00e5nga andra typer av ikoner.<\/p>\n H\u00e4r \u00e4r n\u00e5gra andra du kan kolla in:<\/p>\n F\u00f6rst ska vi dyka in n\u00e5gra av de snabba och enkla s\u00e4tten du kan anv\u00e4nda WordPress ikontypsnitt. Kom dock ih\u00e5g att inte alla dessa s\u00e4tt \u00e4r bra n\u00e4r det g\u00e4ller prestanda. F\u00f6r det rekommenderar vi att du hoppar ner till avsnittet om den b\u00e4sta metoden<\/a>.<\/p>\n Det snabbaste s\u00e4ttet att komma ig\u00e5ng med WordPress ikontypsnitt \u00e4r att helt enkelt anv\u00e4nda ett tredjepartsplugin. Det kostnadsfria Font Awesome Integration-pluginet<\/a> inneh\u00e5ller det senaste ikonbiblioteket fr\u00e5n Font Awesome 5. N\u00e4r du har installerat och aktiverat det beh\u00f6ver du bara en enkel kortkod f\u00f6r att infoga en ikon. De har till och med en WordPress-ikon nu! Ganska coolt.<\/p>\n Du kan kolla in Font Awesome 5:s grundl\u00e4ggande anv\u00e4ndningsdiagram<\/a> f\u00f6r fler s\u00e4tt att anv\u00e4nda och anpassa det, liksom deras ikonbibliotek. Nedan infogade vi till exempel WordPress Font Awesome-ikonen i ett Gutenberg<\/a> kortkodsblock och la till S\u00e5 h\u00e4r ser det ut p\u00e5 frontenden. Ganska l\u00e4tt eller hur? Vi fick en Font Awesome-ikon p\u00e5 v\u00e5r webbplats p\u00e5 bara n\u00e5gra minuter.<\/p>\n Om du vill ha en hel del l\u00e4ttanv\u00e4nda kortkoder, kan du ocks\u00e5 kika p\u00e5 pluginet Shortcodes Ultimate<\/a>. De har ett premiumtill\u00e4gg f\u00f6r ikoner som du kan anv\u00e4nda.<\/p>\n Ovanst\u00e5ende \u00e4r en bra l\u00f6sning om du vill l\u00e5ta dina kunder l\u00e4gga till ikoner till inl\u00e4gg eller sidor, men om du vill anv\u00e4nda dessa element inom ditt tema eller plugin \u00e4r det b\u00e4st att k\u00f6a dem sj\u00e4lv (vi kommer att prata om detta l\u00e4ngre fram).<\/p>\n Dashicons<\/a> \u00e4r en upps\u00e4ttning ikontypsnitt som ing\u00e5r som standard eftersom WordPress anv\u00e4nder det p\u00e5 backenden. Du m\u00e5ste k\u00f6a det p\u00e5 frontenden, men allt du beh\u00f6ver \u00e4r namnet p\u00e5 skriptet, filen finns redan tillg\u00e4nglig f\u00f6r WordPress.<\/p>\n Du kan l\u00e4gga till f\u00f6ljande till din Du kan sedan g\u00e5 till Dashicons webbplats<\/a>, v\u00e4lja en ikon och klicka p\u00e5 l\u00e4nken ”Kopiera HTML” som ger dig den kod du beh\u00f6ver f\u00f6r att visa ikonen. De har inte ett stort urval, men de fungerar fortfarande bra och \u00e4r mycket l\u00e4tta.<\/p>\n Nedan infogade vi till exempel instrumentpanelsikonen i ett Gutenberg<\/a> HTML-block.<\/p>\n S\u00e5 h\u00e4r ser det ut p\u00e5 frontenden.<\/p>\n Dashicons har inga coola kortkoder direkt fr\u00e5n b\u00f6rjan, men du kan anpassa storleken p\u00e5 dina ikoner med CSS<\/a>. H\u00e4r \u00e4r ett exempel p\u00e5 att infoga en ikon precis f\u00f6re en rubrik.<\/p>\n Ditt tredje alternativ \u00e4r att manuellt l\u00e4nka till ett externt hostat ikontypsnitt. Detta \u00e4r i princip vad pluginet i alternativ 1 ovan g\u00f6r, fast bakom kulisserna.<\/p>\n F\u00f6r Font Awesome kan du h\u00e4mta koden fr\u00e5n deras startsida<\/a> och sedan f\u00f6lja stegen nedan. De hostar alla sina teckensnitt p\u00e5 ett CDN<\/a> helt gratis. Det kommer att se ut s\u00e5 h\u00e4r:<\/p>\n Steg 1<\/strong><\/p>\n Kopiera koden till Steg 2<\/strong><\/p>\n Du kan sedan b\u00f6rja l\u00e4gga in ikoner i din HTML-kods Medan det inte \u00e4r n\u00e5got fel med att anv\u00e4nda ett av ovanst\u00e5ende s\u00e4tt att l\u00e4gga till ikontypsnitt p\u00e5 din webbplats, \u00e4r det inte tekniskt sett det b\u00e4sta s\u00e4ttet. Varf\u00f6r? Allt handlar om prestanda<\/strong>.<\/p>\n F\u00f6rst av allt, n\u00e4r du anv\u00e4nder ett plugin f\u00f6r ikontypsnitt eller l\u00e4nkar till ett externt ikontypsnittsbibliotek, kommer det att ladda alla ikoner i hela biblioteket. Om du bara anv\u00e4nder 20 ikoner eller s\u00e5 p\u00e5 hela din webbplats, kan detta hanteras p\u00e5 ett mycket b\u00e4ttre s\u00e4tt.<\/p>\n\n Till exempel inkluderade vi Font Awesome 5-biblioteket p\u00e5 v\u00e5r webbplats och medan CSS-filen f\u00f6r den \u00e4r liten \u00e4r typsnittsfilen i sig 108 KB. \u00c4ven om detta kanske inte verkar s\u00e5 stort, kommer du se l\u00e4ngre fram hur liten filen faktiskt blir n\u00e4r vi bara v\u00e4ljer de HTML-typsnitt<\/a> vi faktiskt anv\u00e4nder.<\/p>\n F\u00f6r det andra \u00e4r det inget fel med att ladda skript fr\u00e5n olika CDN – inneh\u00e5llsleveransn\u00e4tverk. Men om du har m\u00f6jlighet att ladda filen fr\u00e5n endast ett CDN \u00e4r detta vanligtvis snabbare. Varf\u00f6r? D\u00e5 kan det dra nytta av en enda HTTP\/2<\/a>-anslutning och minskar ytterligare DNS-uppslagningar<\/a>. Se bara till att ditt CDN \u00e4r bra!<\/p>\n P\u00e5 grund av de prestandask\u00e4l som vi n\u00e4mnt ovan, kommer vi att g\u00e5 igenom hur du hostar dina ikontypsnitt lokalt, samt hur du bara anv\u00e4nder de du beh\u00f6ver.\u00a0Med lokalt menar vi antingen att ladda dem fr\u00e5n din WordPress-v\u00e4rdserver eller ditt eget CDN.<\/p>\n Genom att v\u00e4lja endast ikontypsnitten du beh\u00f6ver, kan detta f\u00e5 ner filstorleken fr\u00e5n 100 KB till ett par kilobyte<\/strong>, ganska praktiskt! \u00c4nnu b\u00e4ttre: du kan \u00e4ven blanda ikoner fr\u00e5n olika typsnitt.<\/p>\n Att anv\u00e4nda ett ikontypsnitt inneb\u00e4r att hosta typsnittsfilen (WOFF, WOFF 2, etc.) p\u00e5 din webbserver, sedan anv\u00e4nda CSS<\/a> f\u00f6r att h\u00e4mta typsnittet, sedan skapa lite markering f\u00f6r att l\u00e4gga till ikonerna p\u00e5 r\u00e4tt plats.<\/p>\n Medan din webbplats kommer att ladda en enda fil, kommer du faktiskt f\u00e5 ett antal filformat f\u00f6r varje typsnitt eftersom vissa webbl\u00e4sare anv\u00e4nder olika format. Font Awesome inkluderar 6 olika filformat: EOT, SVG, TTF, WOFF, WOFF 2 och OTF. Men p\u00e5 grund av webbl\u00e4sarst\u00f6d beh\u00f6ver du egentligen bara WOFF eller WOFF 2.<\/p>\n Tips: WOFF st\u00f6ds<\/a> av 93%+ av alla moderna webbl\u00e4sare. WOFF 2 komprimeras dock mer, men st\u00f6ds<\/a> endast av 83%+ av alla moderna webbl\u00e4sare. Vi rekommenderar att du v\u00e4ljer den ena eller den andra eller b\u00e5da. Baserat p\u00e5 din kod kommer webbl\u00e4saren avg\u00f6ra vilken den ska leverera till klienten.<\/p>\n Din f\u00f6rsta uppgift \u00e4r att anv\u00e4nda ett verktyg f\u00f6r att v\u00e4lja endast de ikoner du vill ha. Du kan sedan l\u00e4gga till dessa filer i din projektkatalog n\u00e5gonstans, vanligtvis i en typsnittskatalog.<\/p>\n D\u00e4refter l\u00e4gger du till Font Awesome CSS-filen i ditt projekt och l\u00e4gger till det p\u00e5 din webbplats med ett gammalt hederligt l\u00e4nkelement.<\/p>\n Du kan ocks\u00e5 k\u00f6a CSS-filen, eller om den \u00e4r liten helt enkelt anv\u00e4nda den inline.<\/p>\n Om du tittar p\u00e5 CSS-filen kan du se vad som h\u00e4nder i bakgrunden. Typsnittsfilerna laddas, grundelementet med klassen Det enda du beh\u00f6ver vara uppm\u00e4rksam p\u00e5 \u00e4r s\u00f6kv\u00e4gen till dina typsnittsfiler. Som standard laddas de fr\u00e5n Nu n\u00e4r du har en b\u00e4ttre uppfattning om hur det fungerar kommer vi att g\u00e5 igenom hur man g\u00f6r det steg f\u00f6r steg. I det h\u00e4r exemplet anv\u00e4nder vi en aktiv e-handelsplats.<\/p>\n F\u00f6rst b\u00f6r du best\u00e4mma vilket ikontypsnittsbibliotek du vill anv\u00e4nda. Vi delade n\u00e5gra vi gillar i b\u00f6rjan av denna artikel. I detta exempel kommer vi att anv\u00e4nda Font Awesome tillsammans med IcoMoons<\/a> typsnittsgenerator. Om du vill ha WOFF 2-filerna fr\u00e5n IcoMoon m\u00e5ste du betala en eng\u00e5ngsavgift p\u00e5 $9,00 f\u00f6r att f\u00e5 tillg\u00e5ng till deras premiumbibliotek.<\/p>\n Du kan manuellt ladda ner de Font Awesome-ikoner du vill ha gratis, men du skulle beh\u00f6va anv\u00e4nda ett verktyg som FontForge<\/a> f\u00f6r att manuellt redigera deras WOFF- eller WOFF 2-fil. Vi gillar n\u00e4r det \u00e4r enkelt, s\u00e5 vi anv\u00e4nder en generator.<\/p>\n G\u00e5 \u00f6ver till IcoMoon-generatorn<\/a>. Vi klickar p\u00e5 ”L\u00e4gg till” p\u00e5 Font Awesome-biblioteket.<\/p>\n D\u00e4refter ska du v\u00e4lja de ikoner du vill anv\u00e4nda p\u00e5 din WordPress-webbplats. Om du redan anv\u00e4nder Font Awesome och helt enkelt flyttar till lokalt hostade versioner, g\u00f6r en kort lista och v\u00e4lj dem sedan fr\u00e5n biblioteket.<\/p>\n I det h\u00e4r exemplet v\u00e4ljer vi ut ikoner f\u00f6r perfmatters.io<\/a>, en WordPress-driven e-handelswebbplats som k\u00f6r Easy Digital Downloads.<\/p>\n N\u00e4r du har valt ut alla dina ikoner, v\u00e4lj ”Generera typsnitt” l\u00e4ngst ner. F\u00f6r denna webbplats beh\u00f6vde vi 20 ikoner.<\/p>\n Du kommer att f\u00e5 filer som ser ut s\u00e5 h\u00e4r. De viktiga filerna som du beh\u00f6ver \u00e4r D\u00e4refter rekommenderas det att du utf\u00f6r en s\u00f6k-och-ers\u00e4tt i F\u00f6r er som redan anv\u00e4nder Font Awesome, g\u00f6r detta det helt enkelt l\u00e4ttare att \u00e4ndra klasserna \u00f6ver till Font Awesome-versionen. Om n\u00e5got redan var kodat p\u00e5 din WordPress-webbplats med Font Awesome, kommer det d\u00e4rmed automatiskt att b\u00f6rja anv\u00e4nda ikonerna.<\/p>\n S\u00e5 g\u00f6r en S\u00f6kning efter ordet ”icon” och ers\u00e4tt alla f\u00f6rekomster av det med ”fa”. Du b\u00f6r kunna g\u00f6ra en snabb s\u00f6k-och-ers\u00e4tt med en textredigerare som Sublime<\/a>.<\/p>\n Detta ers\u00e4tter Du kan ocks\u00e5 beh\u00f6va \u00e4ndra k\u00e4lladressen baserat p\u00e5 var du laddar upp dina typsnittsfiler i steg 7. Vi rekommenderar att du \u00e4ndrar den webbadressen till ditt CDN<\/strong>.<\/p>\n D\u00e4refter m\u00e5ste du l\u00e4gga till CSS-stylingen till din webbplats. Det finns ett par s\u00e4tt att g\u00f6ra detta p\u00e5.<\/p>\n Alternativ 1<\/strong><\/p>\n Eftersom m\u00e4ngden CSS \u00e4r mycket liten, kan du kopiera hela filens CSS och klistra in den i WordPress Customizer. G\u00f6r aldrig detta f\u00f6r stora filer, men det h\u00e4r \u00e4r en relativt liten m\u00e4ngd CSS. Det betyder att stylingen kommer att laddas inline p\u00e5 din webbplats.<\/p>\n Alternativ 2<\/strong><\/p>\n Du kan l\u00e4nka till din stilmall manuellt genom att placera den i sidhuvudet p\u00e5 din WordPress-webbplats. Tips: L\u00e4nka till den p\u00e5 ditt eget CDN f\u00f6r snabbare prestanda.<\/p>\n Alternativ 3<\/strong><\/p>\n Du kan ocks\u00e5 k\u00f6a CSS-filen i WordPress.\u00a0Processen liknar det manuella s\u00e4ttet v\u00e4ldigt mycket. L\u00e4gg till f\u00f6ljande i temats Nu n\u00e4r du har lagt till din CSS p\u00e5 din webbplats, \u00e4r det dags att ladda upp typsnittsfilerna. Du kan l\u00e4gga typsnitten var som helst, men en mapp som heter ”typsnitt” i din \/public-katalog \u00e4r en bra plats. Kom dock ih\u00e5g att k\u00e4llmappen i din Nu borde din WordPress-webbplats ha b\u00e5de dina CSS- och typsnittsfiler tillg\u00e4ngliga. D\u00e4refter kan du l\u00e4gga till lite uppm\u00e4rkning till din webbplats. Detta \u00e4r bara ett exempel p\u00e5 att l\u00e4gga till en kuggikon.<\/p>\n Du kan se ett levande exempel p\u00e5 hur detta fungerar \u00f6ver p\u00e5 perfmatters.io<\/a>. Kom ih\u00e5g att du kan anv\u00e4nda vilket element som helst, inte bara i. F\u00f6rutom att l\u00e4gga till CSS Den verkliga skillnaden ser du n\u00e4r du tar en titt p\u00e5 storleksskillnaden. Kom ih\u00e5g att n\u00e4r vi l\u00e4nkade till Font Awesomes externa bibliotek var den totala storleken typsnittsfilen 108 KB. N\u00e4r vi anv\u00e4nde en typsnittsgenerator och valde endast de Font Awesome-ikoner vi beh\u00f6vde f\u00f6r webbplatsen, krympte det ner typsnittsfilen till 2,6 KB. V\u00e5r typsnittsfil minskade i storlek med enorma 97,59%!<\/strong><\/p>\n Inte bara det, men det laddas nu ocks\u00e5 fr\u00e5n v\u00e5rt CDN, vilket inneb\u00e4r att det inte finns n\u00e5gra extra DNS-uppslagningar<\/strong> till fontawesome.com.<\/p>\n\n Du kan ocks\u00e5 anv\u00e4nda samma tillv\u00e4gag\u00e5ngss\u00e4tt med SVG-ikoner, det \u00e4r bara lite annorlunda.<\/p>\n En nackdel med ikontypsnitt \u00e4r deras fruktansv\u00e4rda tillg\u00e4nglighet<\/a>. Sk\u00e4rml\u00e4sare kan hoppa \u00f6ver dem, eller \u00e4nnu v\u00e4rre, l\u00e4sa dess unicode eller sj\u00e4lva tecknen. Detta skulle resultera i att synskadade personer h\u00f6r ”gul stj\u00e4rna favoriter” n\u00e4r de tittar p\u00e5 menyalternativet favoriter \u2013 inte idealiskt. Du b\u00f6r ocks\u00e5 ta h\u00e4nsyn till vad som h\u00e4nder om typsnittet inte laddas.<\/p>\n Det b\u00e4sta vore om dekorativa ikoner helt enkelt f\u00f6rsvinner n\u00e4r de inte laddas och att viktiga ikoner skulle ers\u00e4ttas med text om det uppst\u00e5r ett problem.<\/p>\n Tillg\u00e4nglighetsproblemet \u00e4r ganska l\u00e4tt att l\u00f6sa; anv\u00e4nd helt enkelt Om du vill g\u00f6ra det lite grundligare kan du ocks\u00e5 anv\u00e4nda Modernizr f\u00f6r att testa typsnittet. Du m\u00e5ste \u00e4ndra CSS-stylingen n\u00e5got, se den utm\u00e4rkta Bulletproof Font Icons<\/a>-artikeln f\u00f6r mer djupg\u00e5ende information.<\/p>\n F\u00f6r information om hur du kan skapa en text-reservl\u00f6sning f\u00f6r viktiga ikoner rekommenderar vi ocks\u00e5 att du l\u00e4ser artikeln ovan, eftersom de har f\u00f6rklarat och l\u00f6st problemet s\u00e5 bra som m\u00f6jligt, men att implementera det \u00e4r lite utanf\u00f6r ramen f\u00f6r den h\u00e4r artikeln.<\/p>\n Det \u00e4r allt vi har att s\u00e4ga om ikontypsnitt. Nu k\u00e4nner du till ett par olika s\u00e4tt att enkelt l\u00e4gga in ikontypsnitt p\u00e5 din WordPress-webbplats, och det b\u00e4sta s\u00e4ttet att implementera dem n\u00e4r det g\u00e4ller prestanda.<\/p>\n![\"Font](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/font-awesome-iconer.png\")
\n
Snabba och enkla s\u00e4tt att anv\u00e4nda WordPress ikontypsnitt<\/h2>\n
Alternativ 1 \u2013 Anv\u00e4nd ett WordPress-plugin<\/h3>\n
fa-3x<\/code> att g\u00f6ra den tre g\u00e5nger st\u00f6rre.<\/p>\n[fawesome iclass=\"fab fa-wordpress fa-3x\"]<\/code><\/pre>\n![\"Font](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/gutenberg-font-awesome-kortkod.png\")
![\"Font](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/font-awesome-wordpress-5-0.png\")
Alternativ 2 \u2013 Anv\u00e4nd inbyggda Dashicons<\/h3>\n
functions.php-fil<\/code> annars rekommenderar vi att du anv\u00e4nder ett gratis plugin som CodeSnippets<\/a>. Detta minimerar risken f\u00f6r att bryta ditt tema och \u00e4ndringarna kommer ocks\u00e5 att sparas vid temauppdateringar.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'dashicons' );\n}<\/code><\/pre>\n<span class=\"dashicons dashicons-admin-post\"><\/span><\/code><\/pre>\n![\"Dashicons](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/dashicons-gutenberg.png\")
![\"Exempel](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/dashicons-wordpress.png\")
<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\nAlternativ 3 – L\u00e4nka manuellt till externt hostade ikontypsnitt<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.5.0\/css\/all.css\" integrity=\"sha384-xxxxx\" crossorigin=\"anonymous\"><\/code><\/pre>\n<head><\/code> f\u00f6r varje mall eller sida p\u00e5 din WordPress-webbplats d\u00e4r du vill anv\u00e4nda Font Awesome. Du kan redigera temats header.php<\/code>-fil eller \u00e4nnu b\u00e4ttre, f\u00f6lj v\u00e5r enkla handledning om hur du infogar kod i ditt sidhuvud<\/a>.<\/p>\n<body><\/code>. Hitta r\u00e4tt ikon<\/a> och l\u00e4r dig att l\u00e4gga till den p\u00e5 din sida<\/a>.<\/p>\nPrestandaproblem att \u00f6verv\u00e4ga med ikontypsnitt<\/h2>\n
Du beh\u00f6ver f\u00f6rmodligen inte alla dessa ikoner<\/h3>\n
![\"Stort](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/stort-font-awesome-bibliotek.png\")
Ladda fr\u00e5n ett CDN \u00e4r vanligtvis snabbare<\/h3>\n
Hosta ikontypsnitt lokalt (endast de du beh\u00f6ver)<\/h2>\n
Grunderna \u2013 hur det fungerar<\/h3>\n
<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"><\/code><\/pre>\n.fa<\/code> definieras (tillsammans med n\u00e5gra andra), och till sist definieras varje namngiven ikon (t.ex.: .fa-book).<\/p>\n..\/fonts<\/code> som kommer att vara typsnittskatalogen, en mapp h\u00f6gre \u00e4n den aktuella CSS-filen. Du kan beh\u00f6va \u00e4ndra detta f\u00f6r att passa din egen katalogstruktur.<\/p>\nSteg 1<\/h3>\n
Steg 2<\/h3>\n
![\"IcoMoon](\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/10\/icomoon-font-awesome-library.png\")
Steg 3<\/h3>\n
![\"V\u00e4lj](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/valj-font-awesome-ikoner.png\")
Steg 4<\/h3>\n
![\"Font](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/font-awesome-ikoner-icomoon-export.png\")
styles.css<\/code>-filen och typsnittsfilerna (WOFF, WOFF 2).<\/p>\n![\"Ikontypsnittsfiler\"](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/ikontypsnittsfiler.png\")
Steg 5<\/h3>\n
styles-css<\/code>-filen innan du laddar upp\/kopierar den till din webbplats. S\u00e5 h\u00e4r ser den ursprungliga filen ut.<\/p>\n![\"Icomoon](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/icomoon-css-fil.png\")
![\"S\u00f6k-och-ers\u00e4tt](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/sok-och-ersatt-i-sublime.png\")
[class^=\"icon-\"], [class*=\" icon-\"]<\/code> med [class^=\"fa-\"], [class*=\" fa-\"]<\/code>. Det fixar oks\u00e5 varje ikon, s\u00e5 ist\u00e4llet f\u00f6r att de b\u00f6rjar med .icon-<\/code>, b\u00f6rjar de nu med.fa-<\/code>.<\/p>\nSteg 6<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.yourdomain.com\/fonts\/style.css\"><\/code><\/pre>\nfunctions.php<\/code>-fil, eller anv\u00e4nd det kostnadsfria pluginet Code Snippets<\/a>. Du kan beh\u00f6va \u00e4ndra katalogen baserat p\u00e5 var du laddat upp den.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '\/css\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_styles' );<\/code><\/pre>\nSteg 7<\/h3>\n
styles.css<\/code>-fil m\u00e5ste matcha.<\/p>\n![\"Icon](\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/10\/icon-font-files-sftp.png\"){kind=icon}
Steg 8<\/h3>\n
<i class=\"fa fa-cog\"><\/i><\/code><\/pre>\ni<\/code> dina anpassade klasser, kan du ocks\u00e5 anv\u00e4nda vanliga span<\/code>-element.<\/p>\n![\"Font](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/font-awesome-exempel-perfmatters.png\")
![\"Storleken](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2015\/10\/storleken-av-woff2-font-awesome-fil.png\")
Tillg\u00e4nglighetsproblem f\u00f6r ikontypsnitt<\/h2>\n
aria-hidden=\"true\"<\/code> -parametern och v\u00e4rdet f\u00f6r att indikera att sk\u00e4rml\u00e4sarna ska ignorera v\u00e5rt element.<\/p>\n<span class=\"icon icon-star\" aria-hidden=\"true\"><\/span> My Favourites<\/code><\/pre>\nSammanfattning<\/h2>\n