ફ ont ન્ટ અદ્ભુત 6: સંપૂર્ણ સમીક્ષા
- 1 ફ ont ન્ટ અદ્ભુત કેવી રીતે ઇન્સ્ટોલ કરવું
- પદ્ધતિ 1.
- પદ્ધતિ 2.
- 2 ફ ont ન્ટ અદ્ભુત ચિહ્નોનો ઉપયોગ કેવી રીતે કરવો
- 1 માનક ચિહ્નો
- 2 મોટા ચિહ્નો
- 3 સ્થિર પહોળાઈ ચિહ્નો
- બુલેટેડ સૂચિ માટે 4 ચિહ્નો
- 5 ફ્રેમવાળા ચિહ્નો અને અવતરણો
- 6 એનિમેટેડ ચિહ્નો
- 7 પરિવર્તિત ચિહ્નો
- 8 સંયોજન ચિહ્નો
- 3 Font Awesome 4.5.0 collection, classes અનેcss code to insert using the content property
- 4 સંબંધિત સંસાધનો
- મૂર્તિ કદ
- મૂર્તતા
- વારંવાર પૂછાતા પ્રશ્નો
ફ ont ન્ટ અદ્ભુત એ સ્કેલેબલ વેક્ટર ચિહ્નોનો સંગ્રહ છે. ચિહ્નો સીએસએસ ગુણધર્મોનો ઉપયોગ કરીને ફોર્મેટ કરી શકાય છે, તેમનો રંગ, કદ, છાયા અને વધુ સેટ કરી શકાય છે. ફ ont ન્ટ સંસ્કરણ 5.5.0 માં 605 ચિહ્નો શામેલ છે.
1 ફ ont ન્ટ અદ્ભુત કેવી રીતે ઇન્સ્ટોલ કરવું
પદ્ધતિ 1.
નીચેના કોડને ઉમેરીને ફાઇલના ફ ont ન્ટ-અજાયત.સીએસએસ સંસ્કરણનો ઉપયોગ કરો<head> વિભાગ:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">એકવાર ફોન્ટ કનેક્ટ થઈ જાય, પછી તમે તમારી સાઇટ પર ચિહ્નોનો ઉપયોગ કરી શકો છો.
પદ્ધતિ 2.
ફોન્ટ અદ્ભુત માંથી ફોન્ટ ડાઉનલોડ કરો. આર્કાઇવને અનપ ack ક કરો અને આર્કાઇવથી સાઇટ સર્વર - સીએસએસ અને ફોન્ટ્સ પર બે ફોલ્ડર્સ અપલોડ કરો. જો તમારી પાસે પહેલેથી જ તમારી સાઇટ પર આવા નામોવાળા ફોલ્ડર્સ છે, તો તમારે ફક્ત તેમને ડાઉનલોડ કરેલા ફોલ્ડર્સમાંથી ફાઇલો ઉમેરવાની જરૂર છે.
તમે ફાઇલના સંપૂર્ણ અથવા મિનિફાઇડ સંસ્કરણનો ઉપયોગ કરી શકો છો:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 ફ ont ન્ટ અદ્ભુત ચિહ્નોનો ઉપયોગ કેવી રીતે કરવો
ચિહ્નોને વેબ પૃષ્ઠમાં બે રીતે ઉમેરી શકાય છે: માટે યોગ્ય વર્ગો સેટ કરીને<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> લિ: {સામગ્રી પહેલાં: "\ f015";/ * હોમ આઇકોન ઉમેરો */ફ ont ન્ટ-ફેમિલી: ફ ont ન્ટવ ose મ; રંગ: #AAAAA; માર્જિન-રાઇટ: 10px;}}1 માનક ચિહ્નો
ફ ont ન્ટ અદ્ભુત ઇનલાઇન તત્વો સાથે વાપરવા માટે રચાયેલ છે. ચિહ્નો ઉમેરવા માટે, તમારે પહેલા એફએ વર્ગને સેટ કરવાની જરૂર છે<i> નમાના<span> તત્વ.
તત્વ પહેલાં અથવા પછી પસંદ કરેલા ચિહ્ન ઉમેરવા માટે, ખાલી<i></i> નમાના<span></span> તત્વમાં તત્વ ઉમેરવામાં આવે છે, જેને આઇકોન વર્ગ સોંપવામાં આવે છે, તેમજ એક વધારાનો વર્ગ જે સ્ટાઇલને વિસ્તૃત કરે છે.
<i class="fa fa-camera-retro"></i>2 મોટા ચિહ્નો
તેના કન્ટેનરને લગતા આયકનનું કદ વધારવા માટે, એફએ-એલજી (33% વધારો), એફએ -2 એક્સ, એફએ -3 એક્સ, એફએ -4 એક્સ, એફએ -5 એક્સ વર્ગોનો ઉપયોગ કરો.
<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 ચિહ્નો
ડિફ default લ્ટ બુલેટ્સને બદલવા માટે એફએ-ઉલ અને એફએ-એલઆઈ વર્ગોનો ઉપયોગ કરો<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>લોરેમ ઇપ્સમ ડોલોર સિટ એમેટ, કન્સેક્ટેટર એડિપિસીંગ એલિટ. ડોનેક એનઇસી પુરૂસ ક Con ન્ગ્યુ, પોસ્યુઅર લિબેરો ઇન, પોર્ટા સેપિયન. સેડ એલિટ લેક્ટસમાં. સેડ લ ac કસ એલિટ, સેમ્પર વીટી ફેલિસ આઈડી, સોડલ્સ કોન્ગ્યુ સેપિયન.</p>6 એનિમેટેડ ચિહ્નો
સ્પિનિંગ ચિહ્નો સેટ કરવા માટે એફએ-સ્પિન, એફએ-પલ્સ, એફએ-રેફ્રેશ, એફએ-સીઓજી વર્ગો ઉમેરો. એનિમેશન આઇઇ 8 - આઇ 9 માં સપોર્ટેડ નથી.
<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 પરિવર્તિત ચિહ્નો
ચિહ્નોને ફેરવવા અથવા ફ્લિપ કરવા માટે, એફએ-રોટેટ-* અને એફએ-ફ્લિપ-* વર્ગોનો ઉપયોગ કરો.
<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
વેબ એપ્લિકેશનો માટે ચિહ્નો એફએ -એડજસ્ટ - \ એફ 042;એફએ -એન્કર - \ એફ 13 ડી;
એફએ -આર્કાઇવ - \ એફ 187;
એફએ -એરોઝ - \ એફ 047;
એફએ -એસ્ટિસ્ક - \ એફ 069;
FAAT - \ f1fa;
એફએ-બેલેન્સ-સ્કેલ-\ એફ 24 ઇ;
ફા -બાન - \ f05e;
ફા -બેંક - \ એફ 19 સી;
એફએ -બાર્કોડ - \ એફ 02 એ;
એફએ-બેટરી-ખાલી-\ એફ 244;
ફા-બેટરી-હાફ-\ એફ 242;
એફએ-બેટરી-ક્વાર્ટર-\ એફ 243;
એફએ-બેટરી-ત્રણ-ક્વાર્ટર-\ એફ 241;
ફા-બેટરી-ફુલ-\ એફ 240;
એફએ -બેડ - \ એફ 236;
એફએ -બીઅર - \ એફ 0 એફસી;
એફએ -બેલ - \ એફ 0 એફ 3;
એફએ-બેલ-સ્લેશ-\ એફ 1 એફ 6;
એફએ -બાઇનોક્યુલર - \ એફ 1 ઇ 5;
FA-birthade-cake-\ f1fd;
ફા -બોલ્ટ - \ f0e7;
એફએ -બોમ્બ - \ એફ 1 ઇ 2;
એફએ -બુક - \ એફ 02 ડી;
ચિહ્નોને ફેરવવા અથવા ફ્લિપ કરવા માટે, એફએ-રોટેટ-* અને એફએ-ફ્લિપ-* વર્ગોનો ઉપયોગ કરો.
4 સંબંધિત સંસાધનો
ફ ont ન્ટ અદ્ભુત સંગ્રહ ઉપરાંત, તમે અન્ય આયકન ફોન્ટ્સનો પણ ઉપયોગ કરી શકો છો.
ફોન્ટેલો.ફોંટેલો માં વિવિધ ચિહ્ન ફોન્ટ્સનો મોટો સંગ્રહ છે. તમે તમને પસંદ કરેલા ચિહ્નો પસંદ કરી શકો છો અને તેને તમારા કમ્પ્યુટર પર ડાઉનલોડ કરી શકો છો.
પાયો ચિહ્ન.ફાઉન્ડેશન આઇકોન એ ફાઉન્ડેશન ફ્રેમવર્કના વિકાસકર્તાઓનું બીજું ચિહ્ન ફોન્ટ સંગ્રહ છે. માનક ચિહ્નો ઉપરાંત, સાઇટમાં રાઉન્ડ ચિહ્નો, સોશિયલ મીડિયા ચિહ્નો અને વધુ છે.
સામગ્રી ચિહ્નો.મટિરીયલ ચિહ્નો એ ગૂગલના એકીકૃત ફ્લેટ ચિહ્નો છે જે દ્રષ્ટિની સરળતાને મૂર્ત બનાવે છે. બધા સામાન્ય પ્લેટફોર્મ પર અને બધા સ્ક્રીન રિઝોલ્યુશન માટે સુંદર પ્રદર્શન માટે ચિહ્નો optim પ્ટિમાઇઝ છે.
આયકન ફોન્ટ સંગ્રહમાં 750+ ચિહ્નો છે. તમારી વેબસાઇટ પર સંગ્રહ ઇન્સ્ટોલ કરવાની સૌથી સહેલી રીત એ છે કે ગૂગલ વેબ ફોન્ટ્સ જેવા ચિહ્નોનો ઉપયોગ કરવો. આ કરવા માટે, નીચેનો કોડ પૃષ્ઠ માર્કઅપમાં શામેલ છે:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">બ્રાઉઝર્સમાં ફોન્ટને યોગ્ય રીતે પ્રદર્શિત કરવા માટે, આઇકોન ફોન્ટનો ઉપયોગ કરશે તે તત્વને સામગ્રી-આઇકોન્સ વર્ગ આપવામાં આવે છે:
.મેટરિયલ-આઇકોન્સ {ફ ont ન્ટ-ફેમિલી: 'મટિરીયલ આઇકોન્સ'; ફ ont ન્ટ-વેઇટ: સામાન્ય ફોન્ટ-શૈલી: સામાન્ય ફોન્ટ-સાઇઝ: 24 પીએક્સ; / * પ્રાધાન્ય ચિહ્ન કદ *///////// પ્રદર્શન: ઇનલાઇન-બ્લોક; પહોળાઈ: 1em; height ંચાઈ: 1em; લાઇન- height ંચાઇ: 1; ટેક્સ્ટ-ટ્રાન્સફોર્મ: કંઈ નહીં; અક્ષર-અવકાશ: સામાન્ય શબ્દ-રેપ: સામાન્ય; વ્હાઇટ-સ્પેસ: નોરેપ; દિશા: એલટીઆર; -વેબકીટ-ફોન્ટ-સ્મૂથિંગ: એન્ટિઆલિયાસ્ડ; / * બધા વેબકિટ બ્રાઉઝર્સ દ્વારા સપોર્ટેડ *///////// ટેક્સ્ટ-રેન્ડરિંગ: tim પ્ટિમાઇઝિબિલિટી; / * સફારી અને ક્રોમ સપોર્ટ *///////// -મોઝ-ઓએસએક્સ-ફોન્ટ-સ્મૂથિંગ: ગ્રેસ્કેલ; /* ફાયરફોક્સ સપોર્ટ. *///////// ફ ont ન્ટ-ફીચર-સેટિંગ્સ: 'લિગા'; /* એટલે કે સપોર્ટ. */////////}આનો ઉપયોગ કરીને ચિહ્નો પોતાને ઉમેરવામાં આવે છે<I class=''material-ચિહ્નો''>આયકનનો અસ્થિબંધન અથવા HTML કોડ</i> ટેગ, ઉદાહરણ તરીકે:
<i class="material-ચિહ્નો">એકાઉન્ટ_બેલેન્સ_વાલેટ</i><i class="material-ચિહ્નો">.</i>અસ્થિબંધન બધા આધુનિક બ્રાઉઝર્સ દ્વારા સમજી શકાય છે, એટલે કે - સંસ્કરણ 10 થી શરૂ થાય છે. આઇકન કોડ આપમેળે જનરેટ થાય છે, આ માટે તમારે આઇકોન ઇમેજ પર ડાબેરી -ક્લિક કરવાની અને સૂચવેલ દેખાવની નકલ કરવાની જરૂર છે.
મૂર્તિ કદ
મૂર્તિ કદ is controlled by additional classes:
.મેટરિયલ-આઇકોન્સ.એમડી -18 {ફ ont ન્ટ-સાઇઝ: 18 પીએક્સ;} /* માટે<i class="material-ચિહ્નો md-18"></i> */////////.મેટરિયલ-આઇકોન્સ.એમડી -24 {ફ ont ન્ટ-સાઇઝ: 24px;} /* માટે<i class="material-ચિહ્નો md-24"></i> */////////.મેટરિયલ-આઇકોન્સ.એમડી -36 {ફ ont ન્ટ-સાઇઝ: 36 પીએક્સ;} /* માટે<i class="material-ચિહ્નો md-36"></i> */////////.મેટરિયલ-આઇકોન્સ.એમડી -48 {ફ ont ન્ટ-સાઇઝ: 48 પીએક્સ;} /* માટે<i class="material-ચિહ્નો md-48"></i> */////////મૂર્તતા
વધારાના વર્ગોનો ઉપયોગ કરીને ચિહ્નોનો રંગ પણ સેટ થયેલ છે:
.મેટરિયલ-આઇકોન્સ.એમડી-ડાર્ક {રંગ: આરજીબીએ (0, 0, 0, 0.54);} /*<i class="material-ચિહ્નો md-dark"></i> */////////.મેટરિયલ-આઇકોન્સ.એમડી-લાઇટ {રંગ: આરજીબીએ (255, 255, 255, 1);} /*<i class="material-ચિહ્નો md-light"></i> */////////.મેટરિયલ-આઇકોન્સ.એમડી-ડાર્ક.એમડી-એક્ટિવ {રંગ: આરજીબીએ (0, 0, 0, 0.26);} /*<i class="material-ચિહ્નો md-dark md-inactive"></i> * / /.મેટરિયલ-આઇકોન્સ.એમડી-લાઇટ.એમડી-એક્ટિવ {રંગ: આરજીબીએ (255, 255, 255, 0.3);} /*<i class="material-ચિહ્નો md-light md-inactive">ચહેરો</i> */////////કસ્ટમ રંગ સેટ કરવા માટે, તમારે એક વર્ગ ઉમેરવાની જરૂર છે જે ચિહ્નનો રંગ વ્યાખ્યાયિત કરે છે, ઉદાહરણ તરીકે:
.મેટરિયલ-આઇકોન્સ.ઇન્ડિગો {રંગ: #1A237E;} /*<i class="material-ચિહ્નો indigo"></i> */////////વારંવાર પૂછાતા પ્રશ્નો
- સરળ શબ્દોમાં ફોન્ટ અદ્ભુત શું છે?
- સારમાં, તે ચિહ્નો સાથેનો એક ફોન્ટ છે જે તેની દૃશ્યતા અને ડિઝાઇનને વધારવા માટે કોઈપણ વેબ પૃષ્ઠ તત્વમાં ઉમેરી શકાય છે. સંગ્રહમાં કોઈપણ કાર્ય અને હેતુ માટે યોગ્ય ઘણા સો ચિહ્નો શામેલ છે.આ લિંક પર વધુ માહિતી
મિશેલ પિનસન એક મુસાફરી ઉત્સાહી અને સામગ્રી નિર્માતા છે. શિક્ષણ અને સંશોધન પ્રત્યેના ઉત્સાહને મર્જ કરીને, તેમણે જ્ knowledge ાન વહેંચવા અને શૈક્ષણિક સામગ્રીને મોહક દ્વારા અન્યને પ્રેરણા આપવાનું કામ કર્યું. વૈશ્વિક કુશળતા અને ભટકવાની ભાવનાથી વ્યક્તિઓને સશક્તિકરણ કરીને વિશ્વને એક સાથે લાવવું.
