Font Awesome 6: Shqyrtim i plotë
- 1 Si të instaloni font awesome
- Metoda 1.
- Metoda 2.
- 2 Si të përdorni ikona të mrekullueshme të shkronjave
- 1 ikona standarde
- 2 ikona të mëdha
- 3 ikona të gjerësisë fikse
- 4 ikona për listën e plumbave
- 5 ikona dhe citate të përshtatura
- 6 ikona të animuara
- 7 ikona të transformuara
- 8 ikona të kombinuara
- 3 Font Awesome 4.5.0 collection, classes dhecss code to insert using the content property
- 4 burime të lidhura
- Madhësia e ikonës
- Ngjyra e ikonës
- Pyetjet E Bëra Më Shpesh
Font Awesome është një koleksion i ikonave të vektorit të shkallëzueshëm. Ikonat mund të formatohen duke përdorur vetitë CSS, të vendosin ngjyrën e tyre, madhësinë, hijen dhe shumë më tepër. Versioni i fontit 5.5.0 përfshin 605 ikona.
1 Si të instaloni font awesome
Metoda 1.
Përdorni versionin font-aweome.css të skedarit duke shtuar kodin e mëposhtëm në<head> Seksioni:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Pasi fonti të jetë i lidhur, mund të përdorni ikonat në faqen tuaj.
Metoda 2.
Shkarkoni fontin nga Font Awesome . Shfrytëzoni arkivin dhe ngarkoni dy dosje nga arkivi në serverin e faqes - CSS dhe shkronjat. Nëse tashmë keni dosje me emra të tillë në faqen tuaj, atëherë thjesht duhet të shtoni skedarë nga dosjet e shkarkuara në to.
Ju mund të përdorni versionin e plotë ose të minifikuar të skedarit:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Si të përdorni ikona të mrekullueshme të shkronjave
Ikonat mund të shtohen në një faqe në internet në dy mënyra: duke vendosur klasat e duhura për<i> dhe<span> elements, oseby adding them to the desired element using the :before, :after pseudo-elements dhethe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Para {përmbajtja: "\ f015";/ * Shtoni ikonën e shtëpisë */FONT-FAMILY: FONTAWESOME; Ngjyra: #AAAAAA; Margin-Right: 10px;}1 ikona standarde
Font Awesome është krijuar për t'u përdorur me elementë inline. Për të shtuar ikona, së pari duhet të vendosni klasën FA në<i> ose<span> element
Për të shtuar ikonën e zgjedhur para ose pas elementit, një bosh<i></i> ose<span></span> Elementi i shtohet elementit, i cili është caktuar një klasë ikonë, si dhe një klasë shtesë që shtrin stilimin.
<i class="fa fa-camera-retro"></i>2 ikona të mëdha
Për të rritur madhësinë e një ikonë në lidhje me enën e saj, përdorni klasat FA-LG (33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 ikona të gjerësisë fikse
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation oselists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Shtëpi</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Librari</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplikime</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Cilësimet</a ></li></ul>4 ikona për listën e plumbave
Përdorni klasat FA-UL dhe FA-LI për të zëvendësuar plumbat e paracaktuar në një<ul>…</ul> Lista e plumbave.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Artikulli i renditjes</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Artikulli i renditjes</li> <li><i class="fa-li fa fa-square"></i>Artikulli i renditjes</li></ul>5 ikona dhe citate të përshtatura
Use the fa-border class to set the border for the icon. The pull-right dhepull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. DONEC NEC PURUS CONGUE, POSUERE LIBERO IN, PORTA SAPIEN. Në sed elit Lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales bashkon Sapien.</p>6 ikona të animuara
Shtoni klasat FA-spin, FA-PULSE, FA-REFRESH, FA-COG për të vendosur ikona rrotulluese. Animacioni nuk mbështetet në IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 ikona të transformuara
Për të rrotulluar ose rrokullisur ikonat, përdorni klasat Fa-Rotate-* dhe Fa-Flip-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 ikona të kombinuara
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, dhefa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes dhecss code to insert using the content property
Ikona për aplikacione në internet FA -rregullim - \ f042;Fa -canchor - \ f13d;
FA -Archive - \ F187;
FA -Arrows - \ F047;
FA -ESTERISK - \ F069;
Faat - \ f1fa;
FA-BALANCE-SCALE-\ F24E;
Fa -ban - \ f05e;
Fa -banka - \ f19c;
Fa -Barcode - \ F02A;
FA-BATTERI-EXPTY-\ F244;
FA-BATTERY-HALF-\ F242;
Fa-bateri-çerek-\ f243;
Fa-bateri-tre-tremujorë-\ f241;
Fa-bateri-plot-\ f240;
FA -BED - \ F236;
Fa -Beer - \ f0fc;
Fa -Bell - \ f0f3;
Fa-Bell-Slash-\ f1f6;
Fa -Binokulat - \ F1E5;
Fa-Birday-Cake-\ F1FD;
Fa -Bolt - \ f0e7;
FA -Bomb - \ f1e2;
FA -Libri - \ F02D;
Për të rrotulluar ose rrokullisur ikonat, përdorni klasat Fa-Rotate-* dhe Fa-Flip-*.
4 burime të lidhura
Përveç koleksionit të mrekullueshëm të shkronjave, mund të përdorni edhe shkronja të tjera të ikonave.
Fontello.Fontello ka një koleksion të madh të shkronjave të ndryshme të ikonave. Ju mund të zgjidhni ikonat që ju pëlqejnë dhe t'i shkarkoni në kompjuterin tuaj.
Ikona e Fondacionit.Ikona e Fondacionit %% %% është një tjetër koleksion i shkronjave të ikonave nga zhvilluesit e kornizës së fondacionit. Përveç ikonave standarde, faqja përmban ikona të rrumbullakëta, ikona të mediave sociale, dhe më shumë.
ikona materiale.Ikonat materiale janë ikona të sheshta të unifikuara të Google që mishërojnë lehtësinë e perceptimit. Ikonat janë optimizuar për ekran të bukur në të gjitha platformat e zakonshme dhe për të gjitha rezolutat e ekranit.
Koleksioni i Font Icon përmban 750+ ikona. Mënyra më e lehtë për të instaluar një koleksion në faqen tuaj të internetit është të përdorni ikona si Google Web Fonts. Për ta bërë këtë, kodi i mëposhtëm është përfshirë në shënimin e faqes:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Për të shfaqur saktë fontin në shfletues, elementit që do të përdorë fontin e ikonës i jepet klasa Materiale-Icons:
.Material-Icons {Font-Family: 'Ikona materiale'; FONT-PEIGHT: Stili normal i shkronjave: FONT-SIZE Normale: 24px; / * Madhësia e Ikonës së Preferuar */ Ekrani: Inline-Block; Gjerësia: 1em; Lartësia: 1em; Height Line: 1; Teksti i Tekstit: Asnjë; Hapësira e shkronjave: mbështjellës normal i fjalës: normal; Hapësira e bardhë: NowRap; Drejtimi: LTR; -Webkit-font-i butë: Antialiased; / * Mbështetur nga të gjithë shfletuesit e webkit */ rendimenti i tekstit: optimizelegueshmëria; / * Safari dhe Mbështetja e Chrome */ -moz-Osx-Font-Sthiming: Grayscale; /* Mbështetje Firefox. */ Font-Feature-vendosjet: 'Liga'; /* IE mbështetje. */}Vetë ikonat shtohen duke përdorur<I class=''material-ikona''>Kodi i ligaturës ose HTML i ikonës</i> Tag, për shembull:
<i class="material-ikona">llogari_balance_wallet</i><i class="material-ikona"></i>Ligatura kuptohet nga të gjithë shfletuesit modernë, d.m.th. - duke filluar nga versioni 10. Kodi i ikonës gjenerohet automatikisht, për këtë ju duhet të klikoni me të majtën në imazhin e ikonës dhe të kopjoni pamjen e sugjeruar.
Madhësia e ikonës
Madhësia e ikonës is controlled by additional classes:
.Material-ikona.md-18 {font-size: 18px;} /* për<i class="material-ikona md-18"></i> */.Material-ikona.md-24 {font-size: 24px;} /* për<i class="material-ikona md-24"></i> */.Material-ikona.md-36 {font-size: 36px;} /* për<i class="material-ikona md-36"></i> */.Material-ikona.md-48 {font-size: 48px;} /* për<i class="material-ikona md-48"></i> */Ngjyra e ikonës
Ngjyra e ikonave është vendosur gjithashtu duke përdorur klasa shtesë:
.Material-ikona.md-dark {ngjyra: rgba (0, 0, 0, 0.54);} /*<i class="material-ikona md-dark"></i> */.Material-ikona.md-dritë {ngjyra: rgba (255, 255, 255, 1);} /*<i class="material-ikona md-light"></i> */.Material-ikona.md-dark.md-inaktiv {ngjyra: rgba (0, 0, 0, 0.26);} /*<i class="material-ikona md-dark md-inactive"></i> * /.Material-ikona.md-dritë.md-inaktiv {ngjyra: rgba (255, 255, 255, 0.3);} /*<i class="material-ikona md-light md-inactive">fytyrë</i> */Për të vendosur një ngjyrë të personalizuar, duhet të shtoni një klasë që përcakton ngjyrën e ikonës, për shembull:
.Material-ikona.Indigo {ngjyra: #1a237e;} /*<i class="material-ikona indigo"></i> */Pyetjet E Bëra Më Shpesh
- Isfarë është Font Awesome në terma të thjeshtë?
- Në thelb, është një font me ikona që mund të shtohen në çdo element të faqes në internet për të përmirësuar dukshmërinë dhe modelin e tij. Koleksioni përbëhet nga disa qindra ikona të përshtatshme për çdo detyrë dhe qëllim.Më shumë informacion mbi këtë link
Michel Pinson është një entuziast i udhëtimit dhe krijues i përmbajtjes. Duke bashkuar pasionin për arsimin dhe eksplorimin, ai është i pranueshëm për të shkëmbyer njohuri dhe frymëzimin e të tjerëve përmes tërheqjes së përmbajtjes arsimore. Duke e afruar botën më afër duke fuqizuar individët me ekspertizë globale dhe një ndjenjë të bredhjes.
