ഫോണ്ട് ആകർഷണീയ 6: പൂർണ്ണ അവലോകനം
- 1 ഫോണ്ട് വിസ്മയം എങ്ങനെ ഇൻസ്റ്റാൾ ചെയ്യാം
- രീതി 1.
- രീതി 2.
- 2 ഫോണ്ട് ആകർഷണീയമായ ഐക്കണുകൾ എങ്ങനെ ഉപയോഗിക്കാം
- 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 ഉറവിടങ്ങൾ
- ഐക്കൺ വലുപ്പം
- ഐക്കൺ നിറം
- പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ
സ്കേലബിൾ വെക്റ്റർ ഐക്കണുകളുടെ ഒരു ശേഖരമാണ് ഫോണ്ട് ആകർഷണീയമായത്. CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് ഐക്കണുകൾ ഫോർമാറ്റുചെയ്യാനാകും, അവയുടെ നിറം, വലുപ്പം, നിഴൽ എന്നിവയും അതിലേറെയും സജ്ജമാക്കുക. ഫോണ്ട് പതിപ്പ് 5.50 ൽ 605 ഐക്കണുകൾ ഉൾപ്പെടുന്നു.
1 ഫോണ്ട് വിസ്മയം എങ്ങനെ ഇൻസ്റ്റാൾ ചെയ്യാം
രീതി 1.
ഇനിപ്പറയുന്ന കോഡ് ചേർക്കുന്നതിലൂടെ ഫയലിന്റെ ഫോണ്ട്-വിസ്മൈ.സിഎസ്എസ് പതിപ്പ് ഉപയോഗിക്കുക<head> വിഭാഗം:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">ഫോണ്ട് കണക്റ്റുചെയ്തുകഴിഞ്ഞാൽ, നിങ്ങളുടെ സൈറ്റിലെ ഐക്കണുകൾ ഉപയോഗിക്കാം.
രീതി 2.
ഫോണ്ട് ആകർഷണീയമായ ൽ നിന്ന് ഫോണ്ട് ഡൗൺലോഡുചെയ്യുക. ആർക്കൈവ് അൺപാക്ക് ചെയ്ത് ആർക്കൈവിൽ നിന്ന് സൈറ്റ് സെർവറിലേക്ക് രണ്ട് ഫോൾഡറുകൾ അപ്ലോഡ് ചെയ്യുക - സിഎസ്എസും ഫോണ്ടുകളും. നിങ്ങളുടെ സൈറ്റിൽ അത്തരം പേരുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇതിനകം ഫോൾഡറുകൾ ഉണ്ടെങ്കിൽ, ഡ download ൺലോഡുചെയ്ത ഫോൾഡറുകളിൽ നിന്ന് നിങ്ങൾ ഫയലുകൾ ചേർക്കേണ്ടതുണ്ട്.
ഫയലിന്റെ പൂർണ്ണമോ ചെറുതാക്കിയതോ ആയ പതിപ്പ് നിങ്ങൾക്ക് ഉപയോഗിക്കാം:
<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"; / * ഹോം ഐക്കൺ ചേർക്കുക * / ഫോണ്ട്-കുടുംബം: ഫോണ്ട്-കുടുംബം;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 ഐക്കണുകൾ
സ്ഥിരസ്ഥിതി ബുള്ളറ്റുകൾ മാറ്റിസ്ഥാപിക്കുന്നതിന് fa-ul, fi-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-COG ക്ലാസുകൾ ചേർക്കുക. 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-rotate- *, 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-annor - \ F13D;
FA- ആർക്കൈവ് - \ F187;
Fa-അമ്പുകൾ - \ F047;
Fa-pterterisk - \ F069;
ഫാറ്റ് - \ എഫ് 1FA;
Fa-ബാലൻസ്-സ്കെയിൽ - \ F24E;
ഫാ-നിരോധനം - \ f05e;
Fa-ബാങ്ക് - \ F19C;
Fa-ബാർകോഡ് - \ F02A;
Fa-ബാറ്ററി-ശൂന്യമായി - \ F244;
Fa-ബാറ്ററി പകുതി - \ F242;
Fa-ബാറ്ററി-quer - \ F243;
Fa-ബാറ്ററി-ത്രീ-ക്വാർട്ടേഴ്സ് - \ F241;
Fa-ബാറ്ററി പൂർണ്ണമായി - \ F240;
Fa ബെഡ് - \ F236;
Fa-beer - \ F0FC;
ഫാ-ബെൽ - \ f0f3;
Fa-ബെൽ-സ്ലാഷ് - \ f1f6;
Fa-ബൈനോക്കുലറുകൾ - \ f1e5;
Fa ജന്മദിന-കേക്ക് - \ F1FD;
Fa-bolt - \ F0E7;
FA-ബോംബ് - \ F1E2;
Fa-പുസ്തകം - \ F02D;
തിയോണുകൾ തിരിക്കുകയോ ഫ്ലിപ്പ് ചെയ്യുകയോ ചെയ്യുക, fa-rotate- *, fa-flip- * ക്ലാസുകൾ ഉപയോഗിക്കുക.
ബന്ധപ്പെട്ട 4 ഉറവിടങ്ങൾ
ഫോണ്ട് ആകർഷണീയമായ ശേഖരത്തിന് പുറമേ, നിങ്ങൾക്ക് മറ്റ് ഐക്കൺ ഫോണ്ടുകളും ഉപയോഗിക്കാം.
ഫോണ്ടെല്ലോ.fotlello വിവിധ ഐക്കൺ ഫോണ്ടുകളുടെ ഒരു വലിയ ശേഖരം ഉണ്ട്. നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഐക്കണുകൾ തിരഞ്ഞെടുത്ത് നിങ്ങളുടെ കമ്പ്യൂട്ടറിലേക്ക് ഡ download ൺലോഡ് ചെയ്യാം.
ഫ Foundation ണ്ടേഷൻ ഐക്കൺ.ഫ Foundation ണ്ടേഷൻ ഐക്കൺ ഫ Foundation ണ്ടേഷൻ ചട്ടക്കൂടിൽ നിന്നുള്ള മറ്റൊരു ഐക്കൺ ഫോണ്ട് ശേഖരണമാണ്. സ്റ്റാൻഡേർഡ് ഐക്കണുകൾക്ക് പുറമേ, സൈറ്റ് റ round ണ്ട് ഐക്കണുകൾ, സോഷ്യൽ മീഡിയ ഐക്കണുകൾ എന്നിവയും അതിലേറെയും സവിശേഷതകളാണ്.
മെറ്റീരിയൽ ഐക്കണുകൾ.ഗർഭധാരണത്തിന്റെ അനായാസം ഉൾക്കൊള്ളുന്ന ഗൂഗിളിന്റെ ഏകീകൃത ഫ്ലാറ്റ് ഐക്കണുകളാണ് മെറ്റീരിയൽ ഐക്കണുകൾ. എല്ലാ സാധാരണ പ്ലാറ്റ്ഫോമുകളിലും എല്ലാ സ്ക്രീൻ മിഴിവുകൾക്കും ഉള്ള മനോഹരമായ ഡിസ്പ്ലേയ്ക്കായി ഐക്കണുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു.
ഐക്കൺ ഫോണ്ട് ശേഖരത്തിൽ 750+ ഐക്കണുകൾ അടങ്ങിയിരിക്കുന്നു. നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഒരു ശേഖരം ഇൻസ്റ്റാൾ ചെയ്യാനുള്ള ഏറ്റവും എളുപ്പ മാർഗം Google വെബ് ഫോണ്ടുകൾ പോലുള്ള ഐക്കണുകൾ ഉപയോഗിക്കുക എന്നതാണ്. ഇത് ചെയ്യുന്നതിന്, ഇനിപ്പറയുന്ന കോഡ് പേജ് മാർക്ക്അപ്പിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്നു:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ബ്ര rowsers സറുകളിലെ ഫോണ്ട് ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന്, ഐക്കൺ ഫോണ്ട് ഉപയോഗിക്കുന്ന ഘടകം മെറ്റീരിയൽ-ഐക്കണുകൾ ക്ലാസ് നൽകിയിരിക്കുന്നു:
. മാറ്റീഷണൽ-ഐക്കണുകൾ {ഫോണ്ട്-കുടുംബം: 'മെറ്റീരിയൽ ഐക്കണുകൾ'; ഫോണ്ട്-ഭാരം: സാധാരണ ഫോണ്ട്-ശൈലി: സാധാരണ ഫോണ്ട്-വലുപ്പം: 24Px; / * തിരഞ്ഞെടുത്ത ഐക്കൺ വലുപ്പം * / ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; വീതി: 1EM; ഉയരം: 1EM; ലൈൻ-ഉയരം: 1; ടെക്സ്റ്റ്-പരിവർത്തനം: ഒന്നുമില്ല; ലെറ്റർ-സ്പെയ്സിംഗ്: സാധാരണ വേഡ്-റാപ്: സാധാരണ; വൈറ്റ്-സ്പേസ്: Nowrap; സംവിധാനം: Ltr; -വെബ്കിറ്റ്-ഫോണ്ട്-മിനുസമാർന്നത്: ആന്റിഅലിയാസിസ്; / * എല്ലാ വെബ്കിറ്റ് ബ്ര rowsers സറുകളും പിന്തുണയ്ക്കുന്നു * / ടെക്സ്റ്റ്-റെൻഡറിംഗ്: ഒപ്റ്റിമൈസിബിലിബിലിറ്റി; / * സഫാരി, ക്രോം പിന്തുണ * / -മോസ്-ഒഎസ്എക്സ്-ഫോണ്ട്-മിനുസമാർന്നത്: ഗ്രേസ്കെയിൽ; / * ഫയർഫോക്സ് പിന്തുണ. * / ഫോണ്ട്-സവിശേഷത-ക്രമീകരണങ്ങൾ: 'ലിഗ'; / * അതായത് പിന്തുണ. * /}സ്വയം ഉപയോഗിച്ച് ഐക്കണുകൾ ചേർത്തു<I class=''material-ഐക്കണുകൾ''>ഐക്കണിന്റെ ലിഗേച്ച അല്ലെങ്കിൽ HTML കോഡ്</i> ഉദാഹരണത്തിന്, ടാഗ്:
<i class="material-ഐക്കണുകൾ">അക്കൗണ്ട്_ബാലൻസ്_വലെറ്റ്</i><i class="material-ഐക്കണുകൾ">പതനം</i>എല്ലാ ആധുനിക ബ്രൗസറുകളും ലിഗേച്ചർ മനസ്സിലാക്കുന്നു, അതായത് - പതിപ്പ് 10 മുതൽ ഐക്കൺ കോഡ് യാന്ത്രികമായി സൃഷ്ടിക്കപ്പെടുന്നു, ഇതിനായി നിങ്ങൾ ഐക്കൺ ഇമേജിൽ ഇടത്-ക്ലിക്കുചെയ്യേണ്ടതുണ്ട്.
ഐക്കൺ വലുപ്പം
ഐക്കൺ വലുപ്പം is controlled by additional classes:
. മാറ്റീഷണൽ-ഐക്കണുകൾ .md-18 {ഫോണ്ട്-വലുപ്പം: 18px;} for<i class="material-ഐക്കണുകൾ md-18"></i> * /. മാറ്റീഷണൽ-ഐക്കണുകൾ .md-24 {ഫോണ്ട്-വലുപ്പം: 24px;} / *<i class="material-ഐക്കണുകൾ md-24"></i> * /. മാറ്റീഷണൽ-ഐക്കണുകൾ .md-36 {ഫോണ്ട്-വലുപ്പം: 36px;} from<i class="material-ഐക്കണുകൾ md-36"></i> * /. മാറ്റീഷണൽ-ഐക്കണുകൾ .md-48 {ഫോണ്ട്-വലുപ്പം: 48px;} for<i class="material-ഐക്കണുകൾ md-48"></i> * /ഐക്കൺ നിറം
അധിക ക്ലാസുകൾ ഉപയോഗിച്ച് ഐക്കണുകളുടെ നിറവും സജ്ജമാക്കിയിരിക്കുന്നു:
. മാറ്റമെറ്റൽ-ഐക്കണുകൾ.<i class="material-ഐക്കണുകൾ md-dark"></i> * /. മാറ്റീഷണൽ-ഐക്കണുകൾ .md-latf {നിറം: rgba (255, 255, 255, 1);} / *<i class="material-ഐക്കണുകൾ md-light"></i> * /. മാറ്റീഷണൽ-ഐക്കണുകൾ .md-trant.md-unction {നിറം: RGBA (0, 0, 0, 0.26);} / *<i class="material-ഐക്കണുകൾ md-dark md-inactive"></i> * /. മാറ്റമെറ്റൽ-ഐക്കണുകൾ .md-lote.md-unce.md-uve ആറ്റീവ് {നിറം: RGBA (255, 255, 255, 0.3);} / *<i class="material-ഐക്കണുകൾ md-light md-inactive">മുഖം</i> * /ഒരു ഇഷ്ടാനുസൃത വർണ്ണം സജ്ജീകരിക്കുന്നതിന്, ഐക്കണിന്റെ നിറം നിർവചിക്കുന്ന ഒരു ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്, ഉദാഹരണത്തിന്:
.ഇഞ്ചിഗോ {നിറം: # 1a237e;} / *;} / *<i class="material-ഐക്കണുകൾ indigo"></i> * /പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ
- ലളിതമായ നിബന്ധനകളിൽ എന്താണ് ആകർഷകമായത്?
- ചുരുക്കത്തിൽ, ഇത് ഐക്കണുകൾ ഉള്ള ഒരു ഫോണ്ടിലാണ്, അത് ദൃശ്യപരതയും രൂപകൽപ്പനയും വർദ്ധിപ്പിക്കുന്നതിന് ഏതെങ്കിലും വെബ് പേജ് ഘടകത്തിലേക്ക് ചേർക്കാൻ കഴിയും. ഏതെങ്കിലും ജോലിയ്ക്കും ഉദ്ദേശ്യത്തിനും അനുയോജ്യമായ നൂറുകണക്കിന് ഐക്കണുകൾ ശേഖരത്തിൽ ഉൾപ്പെടുന്നു.ഈ ലിങ്കിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ
യാത്രാ പ്രേമികവും ഉള്ളടക്ക സ്രഷ്ടാവുമാണ് മൈക്കൽ പിൻസൺ. വിദ്യാഭ്യാസത്തിനായുള്ള അഭിനിവേശം ലയിപ്പിക്കുന്ന അദ്ദേഹം, വിദ്യാഭ്യാസ ഉള്ളടക്കത്തിലൂടെ അറിവ് പങ്കിടാനും മറ്റുള്ളവരെ പ്രചോദിപ്പിക്കാനും അദ്ദേഹം ആഗ്രഹിക്കുന്നു. ആഗോള വൈദഗ്ധ്യവും വാണ്ടർലറ്റിന്റെയും ഒരു അർത്ഥം വ്യക്തികളെ ശാക്തീകരിച്ച് ലോകത്തെ ഒരുമിച്ച് കൊണ്ടുവരിക.
