எழுத்துரு அற்புதமான 6: முழு விமர்சனம்
- 1 எழுத்துருவை எவ்வாறு நிறுவுவது அற்புதமானது
- முறை 1.
- முறை 2.
- 2 எழுத்துரு அற்புதமான ஐகான்களைப் பயன்படுத்துவது எப்படி
- 1 நிலையான சின்னங்கள்
- 2 பெரிய சின்னங்கள்
- 3 நிலையான அகல சின்னங்கள்
- புல்லட் பட்டியலுக்கான 4 சின்னங்கள்
- 5 கட்டமைக்கப்பட்ட சின்னங்கள் மற்றும் மேற்கோள்கள்
- 6 அனிமேஷன் ஐகான்கள்
- மாற்றப்பட்ட ஐகான்கள்
- 8 சேர்க்கை சின்னங்கள்
- 3 Font Awesome 4.5.0 collection, classes மற்றும்css code to insert using the content property
- தொடர்புடைய 4 வளங்கள்
- ஐகான் அளவு
- ஐகான் நிறம்
- அடிக்கடி கேட்கப்படும் கேள்விகள்
எழுத்துரு அற்புதம் என்பது அளவிடக்கூடிய திசையன் சின்னங்களின் தொகுப்பாகும். 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.
எழுத்துரு அற்புதமான இலிருந்து எழுத்துருவைப் பதிவிறக்கவும். காப்பகத்தைத் திறந்து, காப்பகத்திலிருந்து இரண்டு கோப்புறைகளை தள சேவையகத்திற்கு பதிவேற்றவும் - 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";/ * முகப்பு ஐகானைச் சேர்க்கவும் */எழுத்துரு-குடும்பம்: எழுத்துரு; வண்ணம்: #aaaaaaa; விளிம்பு-வலது: 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 சின்னங்கள்
இயல்புநிலை தோட்டாக்களை மாற்ற FA-உல் மற்றும் 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>லோரெம் இப்சம் டோலர் சிட் அமெட், கான்ஸ்டெர் அடிபிசிங் எலிட். டோனெக் நெக் புருஸ் கான், போசுவேர் லிபரோ இன், போர்டா சேபியன். SED ELIT விரிவுரையில். செட் லாகஸ் எலிட், செம்பர் விட்டே ஃபெலிஸ் ஐடி, சோடல்ஸ் கான்யூக் சேபியன்.</p>6 அனிமேஷன் ஐகான்கள்
சுழல் ஐகான்களை அமைக்க FA-SPIN, FA- துடிப்பு, FA-REFRESH, 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>மாற்றப்பட்ட ஐகான்கள்
ஐகான்களை சுழற்ற அல்லது புரட்ட, 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 -adjust - \ f042;Fa -annkor - \ f13d;
Fa -archive - \ f187;
Fa -arrows - \ f047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
FA- சமநிலை-அளவிலான-\ f24e;
Fa -ban - \ f05e;
FA -BANK - \ F19C;
FA -BARCODE - \ F02A;
Fa-batter-fampy-\ f244;
Fa-பேட்டரி-பாதி-\ f242;
Fa-பேட்டரி-காலாண்டு-\ f243;
Fa-பேட்டரி-மூன்று-காலாண்டுகள்-\ f241;
Fa-Battery-full-\ f240;
FA -BED - \ F236;
Fa -peer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -BINOCULARS - \ F1E5;
Fa-பிர்தே-கேக்-\ f1fd;
Fa -போல்ட் - \ f0e7;
Fa- வெடிகுண்டு - \ f1e2;
Fa -book - \ f02d;
ஐகான்களை சுழற்ற அல்லது புரட்ட, FA-ROTATE-* மற்றும் FA- FLIP-* வகுப்புகளைப் பயன்படுத்தவும்.
தொடர்புடைய 4 வளங்கள்
எழுத்துரு அற்புதமான சேகரிப்புக்கு கூடுதலாக, நீங்கள் மற்ற ஐகான் எழுத்துருக்களையும் பயன்படுத்தலாம்.
ஃபோண்டெல்லோ.FONTELLO பல்வேறு ஐகான் எழுத்துருக்களின் பெரிய தொகுப்பைக் கொண்டுள்ளது. நீங்கள் விரும்பும் சின்னங்களைத் தேர்ந்தெடுத்து அவற்றை உங்கள் கணினியில் பதிவிறக்கம் செய்யலாம்.
அறக்கட்டளை ஐகான்.அறக்கட்டளை ஐகான் என்பது அடித்தள கட்டமைப்பின் டெவலப்பர்களிடமிருந்து மற்றொரு ஐகான் எழுத்துரு சேகரிப்பு ஆகும். நிலையான ஐகான்களுக்கு கூடுதலாக, தளத்தில் சுற்று சின்னங்கள், சமூக ஊடக சின்னங்கள் மற்றும் பல உள்ளன.
பொருள் சின்னங்கள்.பொருள் ஐகான்கள் கூகிளின் ஒருங்கிணைந்த பிளாட் ஐகான்கள் ஆகும், அவை கருத்தை எளிதாக்குகின்றன. அனைத்து பொதுவான தளங்களிலும் மற்றும் அனைத்து திரை தீர்மானங்களுக்கும் அழகான காட்சிக்கு ஐகான்கள் உகந்தவை.
ஐகான் எழுத்துரு சேகரிப்பில் 750+ சின்னங்கள் உள்ளன. உங்கள் வலைத்தளத்தில் ஒரு தொகுப்பை நிறுவுவதற்கான எளிதான வழி கூகிள் வலை எழுத்துருக்கள் போன்ற சின்னங்களைப் பயன்படுத்துவதாகும். இதைச் செய்ய, பின்வரும் குறியீடு பக்க மார்க்அப்பில் சேர்க்கப்பட்டுள்ளது:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">உலாவிகளில் எழுத்துருவை சரியாகக் காண்பிக்க, ஐகான் எழுத்துருவைப் பயன்படுத்தும் உறுப்பு பொருள்-ஐகான்ஸ் வகுப்பிற்கு வழங்கப்படுகிறது:
.மெரேரியல்-ஐகான்கள் {எழுத்துரு-குடும்பம்: 'பொருள் சின்னங்கள்'; எழுத்துரு-எடை: சாதாரண எழுத்துரு பாணி: சாதாரண எழுத்துரு அளவு: 24px; / * விருப்பமான ஐகான் அளவு */ காட்சி: இன்லைன்-பிளாக்; அகலம்: 1em; உயரம்: 1em; வரி உயரம்: 1; உரை-மாற்றம்: எதுவுமில்லை; கடிதம்-இடைவெளி: சாதாரண சொல்-மடக்கு: இயல்பானது; வெள்ளை-இடம்: இப்போது; திசை: எல்.டி.ஆர்; -வெப்கிட்-ஃபோன்ட்-மென்மையான: ஆன்டிலியஸ்; / * அனைத்து வெப்கிட் உலாவிகளால் ஆதரிக்கப்படுகிறது */ உரை-உருவாக்குதல்: உகந்த தன்மை; . /* பயர்பாக்ஸ் ஆதரவு. */ எழுத்துரு-அம்சம்-அமைத்தல்: 'லிகா'; /* அதாவது ஆதரவு. */}ஐகான்கள் அவர்களைப் பயன்படுத்தி சேர்க்கப்படுகின்றன<I class=''material-சின்னங்கள்''>ஐகானின் தசைநார் அல்லது HTML குறியீடு</i> குறிச்சொல், எடுத்துக்காட்டாக:
<i class="material-சின்னங்கள்">Account_Balance_Wallet</i><i class="material-சின்னங்கள்">.</i>தசைநார் அனைத்து நவீன உலாவிகளாலும் புரிந்து கொள்ளப்படுகிறது, அதாவது - பதிப்பு 10 இலிருந்து தொடங்குகிறது. ஐகான் குறியீடு தானாக உருவாக்கப்படுகிறது, இதற்காக நீங்கள் ஐகான் படத்தில் இடது கிளிக் செய்து பரிந்துரைக்கப்பட்ட தோற்றத்தை நகலெடுக்க வேண்டும்.
ஐகான் அளவு
ஐகான் அளவு is controlled by additional classes:
.material-சின்னங்கள்.md-18 {font-size: 18px;} /*<i class="material-சின்னங்கள் md-18"></i> */.material-சின்னங்கள்.md-24 {font-size: 24px;} /*<i class="material-சின்னங்கள் md-24"></i> */.material-சின்னங்கள்.md-36 {font-size: 36px;} /*<i class="material-சின்னங்கள் md-36"></i> */.material-சின்னங்கள்.md-48 {font-size: 48px;} /*<i class="material-சின்னங்கள் md-48"></i> */ஐகான் நிறம்
ஐகான்களின் வண்ணமும் கூடுதல் வகுப்புகளைப் பயன்படுத்தி அமைக்கப்பட்டுள்ளது:
.material-சின்னங்கள்.md-dark {color: rgba (0, 0, 0, 0.54);} /*<i class="material-சின்னங்கள் md-dark"></i> */.மேட்டரியல்-ஐகான்ஸ். எம்.டி-லைட் {வண்ணம்: ஆர்.ஜி.பி.ஏ (255, 255, 255, 1);} /*<i class="material-சின்னங்கள் md-light"></i> */.material-சின்னங்கள்.md-dark.md-inactive {color: rgba (0, 0, 0, 0.26);} /*<i class="material-சின்னங்கள் md-dark md-inactive"></i> * /.material-சின்னங்கள்.md-light.md-inactive {color: rgba (255, 255, 255, 0.3);} /*<i class="material-சின்னங்கள் md-light md-inactive">முகம்</i> */தனிப்பயன் நிறத்தை அமைக்க, ஐகானின் நிறத்தை வரையறுக்கும் ஒரு வகுப்பை நீங்கள் சேர்க்க வேண்டும், எடுத்துக்காட்டாக:
.மேட்டரியல்-ஐகான்ஸ்.இண்டிகோ {வண்ணம்: #1A237E;} /*<i class="material-சின்னங்கள் indigo"></i> */அடிக்கடி கேட்கப்படும் கேள்விகள்
- எளிமையான சொற்களில் எழுத்துரு அற்புதம் என்ன?
- சாராம்சத்தில், இது எந்த வலைப்பக்க உறுப்பிலும் அதன் தெரிவுநிலையையும் வடிவமைப்பையும் மேம்படுத்த ஐகான்களைக் கொண்ட ஒரு எழுத்துரு ஆகும். சேகரிப்பு எந்தவொரு பணி மற்றும் நோக்கத்திற்கும் ஏற்ற பல நூறு சின்னங்களைக் கொண்டுள்ளது.இந்த இணைப்பை பற்றிய மேலும் தகவல்
மைக்கேல் பின்சன் ஒரு பயண ஆர்வலர் மற்றும் உள்ளடக்க உருவாக்கியவர். கல்வி மற்றும் ஆய்வு மீதான ஆர்வத்தை ஒன்றிணைத்து, அறிவைப் பகிர்ந்து கொள்வதற்கும், கல்வி உள்ளடக்கத்தை வசீகரிக்கும் மூலம் மற்றவர்களை ஊக்குவிப்பதற்கும் அவர் தொடங்கினார். உலகளாவிய நிபுணத்துவம் மற்றும் அலைந்து திரிந்த உணர்வுடன் தனிநபர்களை மேம்படுத்துவதன் மூலம் உலகை நெருக்கமாகக் கொண்டுவருவது.
