ఫాంట్ అద్భుతం 6: పూర్తి సమీక్ష
ఫాంట్ అద్భుతం స్కేలబుల్ వెక్టర్ చిహ్నాల సమాహారం. చిహ్నాలను CSS లక్షణాలను ఉపయోగించి ఫార్మాట్ చేయవచ్చు, వాటి రంగు, పరిమాణం, నీడ మరియు మరెన్నో సెట్ చేయవచ్చు. ఫాంట్ వెర్షన్ 5.5.0 లో 605 చిహ్నాలు ఉన్నాయి.
1 ఫాంట్ను అద్భుతంగా ఎలా ఇన్స్టాల్ చేయాలి
విధానం 1.
కింది కోడ్ను జోడించడం ద్వారా ఫైల్ యొక్క font-awesome.css సంస్కరణను ఉపయోగించండి<head> విభాగం:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">ఫాంట్ కనెక్ట్ అయిన తర్వాత, మీరు మీ సైట్లోని చిహ్నాలను ఉపయోగించవచ్చు.
విధానం 2.
font అద్భుతం నుండి ఫాంట్ను డౌన్లోడ్ చేయండి. ఆర్కైవ్ను అన్ప్యాక్ చేసి, ఆర్కైవ్ నుండి సైట్ సర్వర్ - CSS మరియు ఫాంట్లకు రెండు ఫోల్డర్లను అప్లోడ్ చేయండి. మీరు ఇప్పటికే మీ సైట్లో అటువంటి పేర్లతో ఫోల్డర్లను కలిగి ఉంటే, మీరు డౌన్లోడ్ చేసిన ఫోల్డర్ల నుండి ఫైల్లను వారికి జోడించాలి.
మీరు ఫైల్ యొక్క పూర్తి లేదా మినీఫైడ్ వెర్షన్ను ఉపయోగించవచ్చు:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 ఫాంట్ అద్భుత చిహ్నాలను ఎలా ఉపయోగించాలి
చిహ్నాలను వెబ్ పేజీకి రెండు విధాలుగా జోడించవచ్చు: తగిన తరగతులను సెట్ చేయడం ద్వారా<i> మరియు<span> elements, లేదాby adding them to the desired element using the :before, :after pseudo-elements మరియుthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> LI: {కంటెంట్కు ముందు: "\ f015";/ * హోమ్ ఐకాన్ జోడించండి */ఫాంట్-ఫ్యామిలీ: ఫోంటావోసమ్; రంగు: #AAAAAA; మార్జిన్-రైట్: 10px;}1 ప్రామాణిక చిహ్నాలు
ఫాంట్ అద్భుతం ఇన్లైన్ అంశాలతో ఉపయోగించటానికి రూపొందించబడింది. చిహ్నాలను జోడించడానికి, మీరు మొదట FA తరగతిని సెట్ చేయాలి<i> లేదా<span> మూలకం.
మూలకం ముందు లేదా తరువాత ఎంచుకున్న చిహ్నాన్ని జోడించడానికి, ఖాళీ<i></i> లేదా<span></span> మూలకం మూలకానికి జోడించబడుతుంది, ఇది ఐకాన్ క్లాస్, అలాగే స్టైలింగ్ను విస్తరించే అదనపు తరగతి కేటాయించబడుతుంది.
<i class="fa fa-camera-retro"></i>2 పెద్ద చిహ్నాలు
దాని కంటైనర్కు సంబంధించి ఐకాన్ యొక్క పరిమాణాన్ని పెంచడానికి, 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 స్థిర వెడల్పు చిహ్నాలు
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation లేదాlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> హోమ్</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> గ్రంధాలయం</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> అనువర్తనాలు</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> సెట్టింగులు</a ></li></ul>బుల్లెట్ జాబితా కోసం 4 చిహ్నాలు
A లోని డిఫాల్ట్ బుల్లెట్లను భర్తీ చేయడానికి FA-UL మరియు FA-LI తరగతులను ఉపయోగించండి<ul>…</ul> బుల్లెట్ జాబితా.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>జాబితా అంశం</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>జాబితా అంశం</li> <li><i class="fa-li fa fa-square"></i>జాబితా అంశం</li></ul>5 ఫ్రేమ్డ్ చిహ్నాలు మరియు కోట్స్
Use the fa-border class to set the border for the icon. The pull-right మరియుpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>లోరెం ఇప్సమ్ డోలర్ సిట్ అమేట్, కాన్సెక్టెటూర్ అడిపిసింగ్ ఎలిట్. డోనెక్ నెక్ పురస్ కాన్గ్, పోసూయెర్ లిబెరో ఇన్, పోర్టా సాపియన్. సెడ్ ఎలిట్ లెక్టస్లో. సెడ్ లాకస్ ఎలిట్, సెంపర్ విటే ఫెలిస్ ఐడి, సోడాల్స్ కాన్గ్ సాపియన్.</p>6 యానిమేటెడ్ చిహ్నాలు
స్పిన్నింగ్ చిహ్నాలను ఏర్పాటు చేయడానికి FA- స్పిన్, FA- పల్స్, FA- రిఫ్రెష్, FA- కాగ్ తరగతులను జోడించండి. 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 రూపాంతరం చెందిన చిహ్నాలు
చిహ్నాలను తిప్పడానికి లేదా తిప్పడానికి, FA- రోటాట్-* మరియు 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 కలయిక చిహ్నాలు
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, మరియుfa-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 మరియుcss code to insert using the content property
వెబ్ అనువర్తనాల కోసం చిహ్నాలు Fa- సర్దుబాటు - \ f042;Fa -ancor - \ f13d;
FA- ఆర్కివ్ - \ f187;
Fa -carrows - \ f047;
Fa- ఆస్టరిస్క్ - \ f069;
Faat - \ f1fa;
FA- బ్యాలెన్స్-స్కేల్-\ f24e;
Fa -ban - \ f05e;
FA- బ్యాంక్ - \ f19c;
FA- బార్కోడ్ - \ f02a;
ఫా-బ్యాటరీ-ఎంప్టీ-\ f244;
ఫా-బ్యాటరీ-హాఫ్-\ f242;
FA- బ్యాటరీ-క్వార్టర్-\ F243;
FA- బ్యాటరీ-మూడు-క్వార్టర్స్-\ F241;
Fa- బ్యాటరీ-ఫుల్-\ f240;
FA- బెడ్ - \ f236;
FA- బీర్ - \ f0fc;
ఫా -బెల్ - \ f0f3;
ఫా-బెల్-స్లాష్-\ f1f6;
FA- బినోక్యులర్లు - \ f1e5;
FA- పుట్టినరోజు-కేక్-\ f1fd;
FA- బోల్ట్ - \ f0e7;
ఫా -బాంబు - \ f1e2;
FA -BOOK - \ F02D;
చిహ్నాలను తిప్పడానికి లేదా తిప్పడానికి, FA- రోటాట్-* మరియు FA-FLIP-* తరగతులను ఉపయోగించండి.
4 సంబంధిత వనరులు
ఫాంట్ అద్భుత సేకరణతో పాటు, మీరు ఇతర ఐకాన్ ఫాంట్లను కూడా ఉపయోగించవచ్చు.
ఫోంటెల్లో.fontello వివిధ ఐకాన్ ఫాంట్ల యొక్క పెద్ద సేకరణను కలిగి ఉంది. మీరు మీకు నచ్చిన చిహ్నాలను ఎంచుకోవచ్చు మరియు వాటిని మీ కంప్యూటర్కు డౌన్లోడ్ చేసుకోవచ్చు.
ఫౌండేషన్ ఐకాన్.ఫౌండేషన్ ఐకాన్ అనేది ఫౌండేషన్ ఫ్రేమ్వర్క్ యొక్క డెవలపర్ల నుండి మరొక ఐకాన్ ఫాంట్ సేకరణ. ప్రామాణిక చిహ్నాలతో పాటు, సైట్లో రౌండ్ చిహ్నాలు, సోషల్ మీడియా చిహ్నాలు మరియు మరిన్ని ఉన్నాయి.
మెటీరియల్ చిహ్నాలు.మెటీరియల్ చిహ్నాలు గూగుల్ యొక్క ఏకీకృత ఫ్లాట్ చిహ్నాలు, ఇవి అవగాహన సౌలభ్యాన్ని కలిగి ఉంటాయి. అన్ని సాధారణ ప్లాట్ఫారమ్లలో మరియు అన్ని స్క్రీన్ తీర్మానాల కోసం అందమైన ప్రదర్శన కోసం చిహ్నాలు ఆప్టిమైజ్ చేయబడతాయి.
ఐకాన్ ఫాంట్ సేకరణలో 750+ చిహ్నాలు ఉన్నాయి. మీ వెబ్సైట్లో సేకరణను ఇన్స్టాల్ చేయడానికి సులభమైన మార్గం గూగుల్ వెబ్ ఫాంట్లు వంటి చిహ్నాలను ఉపయోగించడం. దీన్ని చేయడానికి, కింది కోడ్ పేజీ మార్కప్లో చేర్చబడింది:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ఫాంట్ను బ్రౌజర్లలో సరిగ్గా ప్రదర్శించడానికి, ఐకాన్ ఫాంట్ను ఉపయోగించే మూలకం మెటీరియల్-ఐకాన్స్ క్లాస్ ఇవ్వబడుతుంది:
.మెటీరియల్-ఐకాన్స్ {ఫాంట్-ఫ్యామిలీ: 'మెటీరియల్ ఐకాన్స్'; ఫాంట్-వెయిట్: సాధారణ ఫాంట్-స్టైల్: సాధారణ ఫాంట్-సైజ్: 24 పిఎక్స్; / * ఇష్టపడే ఐకాన్ పరిమాణం */ ప్రదర్శన: ఇన్లైన్-బ్లాక్; వెడల్పు: 1em; ఎత్తు: 1EM; లైన్-ఎత్తు: 1; టెక్స్ట్-ట్రాన్స్ఫార్మ్: ఏదీ లేదు; లెటర్ స్పేసింగ్: సాధారణ పదం-RRAP: సాధారణం; వైట్-స్పేస్: నౌరాప్; దిశ: ఎల్టిఆర్; -వెబ్కిట్-ఫాంట్-స్మూతీంగ్: యాంటీలియాస్డ్; . . /* ఫైర్ఫాక్స్ మద్దతు. */ ఫాంట్-ఫీచర్-సెట్టింగ్స్: 'లిగా'; /* IE మద్దతు. */}చిహ్నాలను ఉపయోగించి చిహ్నాలు జోడించబడతాయి<I class=''material-చిహ్నాలు''>ఐకాన్ యొక్క లిగాచర్ లేదా HTML కోడ్</i> ట్యాగ్, ఉదాహరణకు:
<i class="material-చిహ్నాలు">ఖాతా_బాలెన్స్_వాలెట్</i><i class="material-చిహ్నాలు"></i>లిగాచర్ అన్ని ఆధునిక బ్రౌజర్ల ద్వారా అర్థం చేసుకోబడుతుంది, అనగా - వెర్షన్ 10 నుండి ప్రారంభమవుతుంది. ఐకాన్ కోడ్ స్వయంచాలకంగా ఉత్పత్తి అవుతుంది, దీని కోసం మీరు ఐకాన్ ఇమేజ్పై ఎడమ క్లిక్ చేసి సూచించిన రూపాన్ని కాపీ చేయాలి.
ఐకాన్ పరిమాణం
ఐకాన్ పరిమాణం is controlled by additional classes:
.మెటీరియల్-ఐకాన్స్.ఎండి -18 {ఫాంట్-సైజ్: 18px;} /*<i class="material-చిహ్నాలు md-18"></i> */.మెటీరియల్-ఐకాన్స్.ఎండి -24 {ఫాంట్-సైజ్: 24 పిఎక్స్;} /*<i class="material-చిహ్నాలు md-24"></i> */.మెటీరియల్-ఐకాన్స్.ఎండి -36 {ఫాంట్-సైజ్: 36px;} /*<i class="material-చిహ్నాలు md-36"></i> */.మెటీరియల్-ఐకాన్స్.ఎండి -48 {ఫాంట్-సైజ్: 48 పిఎక్స్;} /*<i class="material-చిహ్నాలు md-48"></i> */ఐకాన్ రంగు
చిహ్నాల రంగు అదనపు తరగతులను ఉపయోగించి కూడా సెట్ చేయబడింది:
.మెటీరియల్-ఐకాన్స్.ఎండి-డార్క్ {రంగు: rgba (0, 0, 0, 0.54);} /*<i class="material-చిహ్నాలు md-dark"></i> */.మెటీరియల్-ఐకాన్స్.ఎండి-లైట్ {రంగు: rgba (255, 255, 255, 1);} /*<i class="material-చిహ్నాలు md-light"></i> */.మెటీరియల్-ఐకాన్స్.ఎండి-డార్క్<i class="material-చిహ్నాలు md-dark md-inactive"></i> * /.మెటీరియల్-ఐకాన్స్.ఎండి-లైట్<i class="material-చిహ్నాలు md-light md-inactive">ముఖం</i> */అనుకూల రంగును సెట్ చేయడానికి, మీరు ఐకాన్ యొక్క రంగును నిర్వచించే తరగతిని జోడించాలి, ఉదాహరణకు:
.మెటీరియల్-ఐకాన్స్.ఇండిగో {రంగు: #1A237E;} /*<i class="material-చిహ్నాలు indigo"></i> */తరచుగా అడిగే ప్రశ్నలు
- సాధారణ పరంగా ఫాంట్ అద్భుతం ఏమిటి?
- సారాంశంలో, ఇది దృశ్యమానత మరియు రూపకల్పనను మెరుగుపరచడానికి ఏదైనా వెబ్ పేజీ మూలకానికి జోడించగల చిహ్నాలతో కూడిన ఫాంట్. సేకరణలో ఏ పని మరియు ప్రయోజనాలకు అనువైన అనేక వందల చిహ్నాలు ఉంటాయి.ఈ లింక్పై మరింత సమాచారం
