ពុម្ពអក្សរអស្ចារ្យ 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.5.0 រួមបញ្ចូលរូបតំណាង 605 ។
1 វិធីតំឡើងពុម្ពអក្សរអស្ចារ្យ
វិធីទី 1 ។
ប្រើឯកសារពុម្ពអក្សរដែលមាន 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" / * បន្ថែមរូបតំណាងទំព័រដើម * / ពុម្ពអក្សរ - គ្រួសារ: Fontawesome; ពណ៌: #aaaaaa;}1 រូបតំណាងស្តង់ដារ
ពុម្ពអក្សរអស្ចារ្យត្រូវបានរចនាឡើងដើម្បីប្រើជាមួយធាតុក្នុងតួ។ ក្នុងគោលបំណងដើម្បីបន្ថែមរូបតំណាងដំបូងអ្នកត្រូវកំណត់ថ្នាក់ FA ទៅឯកសារ<i> រឺ<span> ធាតុ។
ដើម្បីបន្ថែមរូបតំណាងដែលបានជ្រើសរើសមុនឬក្រោយធាតុទទេ<i></i> រឺ<span></span> ធាតុត្រូវបានបន្ថែមទៅធាតុដែលត្រូវបានផ្ដល់ឱ្យថ្នាក់រូបតំណាងក៏ដូចជាថ្នាក់បន្ថែមដែលពង្រីករចនាប័ទ្ម។
<i class="fa fa-camera-retro"></i>រូបតំណាងធំ 2
ដើម្បីបង្កើនទំហំរូបតំណាងដែលទាក់ទងនឹងកុងតឺន័ររបស់វាសូមប្រើ FA-LG (33% កើនឡើង) FA-2X, FA-3X, ថ្នាក់ FA-5X ថ្នាក់ FA-5X ថ្នាក់ FA-5X ថ្នាក់ 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 និង 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>Lorem ipsum dolor sit amet, បានតក់ស្លុត Eleit alit ។ ដុនស៊ីនគ។ ជ។ ប ..USUR CONGION, Posue Libero ក្នុង, Porta Sapien ។ នៅក្នុង sed eleit lectus ។ Sed Lacus Elit, Semper Vitae Felis, SoDales Kodien Samien ។</p>រូបតំណាងមានចលនា 6
បន្ថែម FA-SPIN, PU-POLSE, FA - ធ្វើឱ្យស្រស់, 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 - យុថ្កា - \ F13D;
FA-Archive - \ F187;
FA-arrows - \ F047;
FA-Asterisk - \ F069;
faat - \ f1fa;
FA-GAFoft-actale - \ F24e;
ការហាមឃាត់ FA - \ F05e;
FA-Bank - \ F19C;
FA-BARCODE - \ F02a;
ហ្វា - អាគស - ទទេ - \ F244;
FA-AWAR-BAGE ពាក់កណ្តាល - \ F242;
FA -ANIRY-AWAIT - \ F243;
ហ្វា - អាគុយ - បីភាគបួន - \ F241;
ហ្វា - អាគុយ - ពេញ - \ F240;
FA-BEED - \ F236;
FA-BEER - \ F0FC;
FA-Bell - \ F0F3;
FA-Bell-Slash - \ f1f6;
FA-កែវយឹត - \ F1e5;
FA-Coinain-Cande - \ F1FD;
FA-Bolt - \ F0e7;
FA-BOMB - \ F1E2;
FA - សៀវភៅ - \ f02d;
ដើម្បីបង្វិលឬដករូបតំណាងចេញសូមប្រើ FA-Rotate- * និង FA-FLIP- * ថ្នាក់។
4 ធនធានពាក់ព័ន្ធ
បន្ថែមលើការប្រមូលពុម្ពអក្សរអស្ចារ្យអ្នកអាចប្រើពុម្ពអក្សររូបតំណាងផ្សេងទៀតផងដែរ។
Fontello ។fontello មានបណ្តុំពុម្ពអក្សររូបតំណាងជាច្រើនយ៉ាងច្រើន។ អ្នកអាចជ្រើសរើសរូបតំណាងដែលអ្នកចូលចិត្តហើយទាញយកពួកវាទៅកុំព្យូទ័ររបស់អ្នក។
រូបតំណាងមូលដ្ឋានគ្រឹះរូបតំណាង។មូលដ្ឋានមូលនិធិរូបតំណាង រូប% s គឺជាការប្រមូលពុម្ពអក្សររូបតំណាងមួយផ្សេងទៀតពីអ្នកអភិវឌ្ឍន៍ក្របខ័ណ្ឌគ្រឹះ។ បន្ថែមលើរូបសញ្ញាស្តង់ដារគេហទំព័រនេះមានរូបតំណាងមូលមូលក្រពេលផលិតផលប្រព័ន្ធផ្សព្វផ្សាយសង្គមនិងច្រើនទៀត។
រូបតំណាងសម្ភារៈ។រូបតំណាងសម្ភារៈគឺជារូបតំណាងសំប៉ែតដែលមានឯកសណ្ឋានរបស់ហ្គូហ្គលដែលបញ្ចូលភាពងាយស្រួលនៃការយល់ឃើញ។ រូបតំណាងត្រូវបានធ្វើឱ្យប្រសើរសម្រាប់ការបង្ហាញដ៏ស្រស់ស្អាតនៅលើគ្រប់វេទិកាទូទៅទាំងអស់និងសម្រាប់ដំណោះស្រាយអេក្រង់ទាំងអស់។
ការប្រមូលពុម្ពអក្សររូបតំណាងមានរូបតំណាង 750+ ។ មធ្យោបាយងាយស្រួលបំផុតក្នុងការតំឡើងការប្រមូលនៅលើគេហទំព័ររបស់អ្នកគឺប្រើរូបតំណាងដូចជាពុម្ពអក្សរគេហទំព័រ Google ។ ដើម្បីធ្វើដូចនេះលេខកូដខាងក្រោមត្រូវបានបញ្ចូលក្នុងការសម្គាល់ទំព័រ:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ដើម្បីបង្ហាញពុម្ពអក្សរឱ្យបានត្រឹមត្រូវនៅក្នុងកម្មវិធីរុករកដែលជាធាតុដែលនឹងប្រើពុម្ពអក្សររូបតំណាងត្រូវបានផ្តល់ឱ្យថ្នាក់សម្ភារៈ:
.materater-រូបតំណាង {ពុម្ពអក្សរ - គ្រួសារ: 'រូបតំណាងសម្ភារៈ'; ពុម្ពអក្សរ - ទំងន់: ស្ទីលពុម្ពអក្សរធម្មតា: ទំហំពុម្ពអក្សរធម្មតា: 24 ភីច; ទំហំរូបតំណាងដែលពេញចិត្ត * / ការបង្ហាញ: ក្នុងតួ ទទឹង: 1em; កម្ពស់: 1em; Line-កម្ពស់: 1; អត្ថបទ - ផ្លាស់ប្តូរ: គ្មាន; អក្សរជ្រាប: ពាក្យធម្មតា - រុំ: ធម្មតា; ប្រផេះពណ៌ស: ឥឡូវ; ទិសដៅ: LTR; -webkit-font-soldiling: antialiased; / * គាំទ្រដោយកម្មវិធីរុករក WebKit ទាំងអស់ * / អត្ថបទបង្ហាញ: ភាពប្រសើរបំផុត; / * ការគាំទ្រ Safari និង Chrome * / -moz-osx-font-font- រលូន: មាត្រដ្ឋានប្រផេះ; / * ការគាំទ្រ Firefox ។ * / spet-spection settingsion settings: 'liga'; / * គាំទ្រ។ * /}រូបតំណាងដែលខ្លួនវាត្រូវបានបន្ថែមដោយប្រើឯកសារ<I class=''material-រូបតំណាង''>ខ្សែអក្សរតូចឬកូដ HTML នៃរូបតំណាង</i> ស្លាកឧទាហរណ៍:
<i class="material-រូបតំណាង">គណនេយ្យ _ballent_wallet</i><i class="material-រូបតំណាង">ឹម</i>សរសៃចងត្រូវបានយល់ដោយកម្មវិធីរុករកទំនើបទាំងអស់ពោលគឺចាប់ផ្តើមពីជំនាន់ 10. កូដរូបតំណាងត្រូវបានបង្កើតដោយស្វ័យប្រវត្តិសម្រាប់ការចុចខាងឆ្វេងលើរូបភាពរូបតំណាងនិងចម្លងរូបតំណាងដែលបានស្នើ។
ទំហំរូបតំណាង
ទំហំរូបតំណាង is controlled by additional classes:
.materater-រូបតំណាង.md-18 {ពុម្ពអក្សរទំហំ: 18px;} / * សម្រាប់<i class="material-រូបតំណាង md-18"></i> * /.materater-រូបតំណាង.md-24 {ពុម្ពអក្សរទំហំ: 24px;} / * សម្រាប់<i class="material-រូបតំណាង md-24"></i> * /.materater-រូបតំណាង.md-36 {ពុម្ពអក្សរទំហំ: 36px;} / * សម្រាប់<i class="material-រូបតំណាង md-36"></i> * /.materater-រូបតំណាង.md-48 {ពុម្ពអក្សរទំហំ: 48px;} / * សម្រាប់<i class="material-រូបតំណាង md-48"></i> * /រូបតំណាងពណ៌
ពណ៌នៃរូបតំណាងក៏ត្រូវបានកំណត់ផងដែរដោយប្រើថ្នាក់បន្ថែម:
.materater-រូបតំណាង.md- ងងឹត {ពណ៌: RGBA (0, 0, 0, 0, 0,54);}<i class="material-រូបតំណាង md-dark"></i> * /.materater-រូបតំណាង.md- ពន្លឺ {ពណ៌: RGBA (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> * /ដើម្បីកំណត់ពណ៌ផ្ទាល់ខ្លួនអ្នកត្រូវបន្ថែមថ្នាក់ដែលកំណត់ពណ៌នៃរូបតំណាងឧទាហរណ៍:
.materater-រូបតំណាង.indigo {ពណ៌: # 1A237E;} / *<i class="material-រូបតំណាង indigo"></i> * /សំណួរដែលគេសួរញឹកញាប់
- តើពុម្ពអក្សរគឺជាអ្វីដែលអស្ចារ្យក្នុងន័យសាមញ្ញ?
- នៅក្នុងខ្លឹមសារវាគឺជាពុម្ពអក្សរដែលមានរូបតំណាងដែលអាចបន្ថែមទៅធាតុទំព័រណាមួយដើម្បីបង្កើនភាពមើលឃើញនិងការរចនារបស់វា។ ការប្រមូលនេះមានរូបតំណាងជាច្រើនរយដែលសមស្របសម្រាប់ភារកិច្ចនិងគោលបំណងណាមួយ។ព័ត៌មានបន្ថែមអំពីតំណនេះ
Michel Pinson គឺជាអ្នកចូលចិត្តធ្វើដំណើរនិងអ្នកបង្កើតមាតិកា។ ការបញ្ចូលចំណង់ចំណូលចិត្តចំពោះការអប់រំនិងការរុករកគាត់បានចែករំលែកចំណេះដឹងនិងលើកទឹកចិត្តអ្នកដទៃតាមរយៈមាតិកាអប់រំដែលទាក់ទាញចិត្ត។ ការនាំពិភពលោកឱ្យកាន់តែខិតជិតគ្នាដោយការផ្តល់អំណាចដល់បុគ្គលដែលមានជំនាញសកលនិងស្មារតីនៃវង្វេងស្មារតី។
