របៀបប្រើ icon នៅក្នុង CSS

in #cambodia7 years ago

font-awesome-css-copy.jpg

វិធីសាមញ្ញបំផុតដើម្បីបន្ថែមអាយខន (icon) មួយទៅទំព័រ HTML របស់អ្នក, គឺត្រូវប្រើជាមួយនឹងបណ្ណាល័យអាយខន (icon) មួយចំនួន, ដូចជា Font Awesome។ នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពីការប្រើអាយខន (icon) របស់ Font Awesome មកបង្ហាញអ្នកទាំងអស់គ្នា។

Font Awesome ជាពុម្ពអក្សរវេបសាយមួយដែលផ្ទុកទៅដោយអាយខនជាច្រើនពីក្របខ័ណ្ឌ (framework) Twitter Bootstrap ហើយឥឡូវនេះមានជាច្រើនទៀត។ បន្ថែមឈ្មោះរបស់អាយខនជាក់លាក់ណាមួយទៅកាន់ធាតុក្នុងតួរបស់ HTML (ដូចជា <i><span>) ។ ដើម្បីប្រើអាយខន (icon) Font Awesome, ធ្វើការបន្ថែមកូដមួយបន្ទាត់ដូចខាងក្រោមនៅខាងក្នុងផ្នែកស្លាក <head> នៃទំព័រ HTML របស់អ្នក:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

ចំណាំ: មិនចាំបាច់ធ្វើការទាញយក ឬដំឡើងនោះទេ!

សូមសរសេរកូដដូចខាងក្រោម៖

css-icon.png

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-icon1.png

ហើយអ្នកក៏អាចហៅប្រើដោយផ្ទាល់នៅក្នុងឯកសារ css របស់អ្នកបានផងដែរ។ ដំបូងលោកអ្នកត្រូវធ្វើការទាញយកឯកសារ Font Awesome មកដាក់នៅក្នុងម៉ាស៊ីនរបស់អ្នកហើយធ្វើការហៅយកទៅប្រើ។ ធ្វើការបន្ថែមកូដមួយបន្ទាត់ដូចខាងក្រោមនៅខាងក្នុងផ្នែកស្លាក <head> នៃទំព័រ HTML របស់អ្នក:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
"path/to/..." គឺជាកន្លែងដែលយើងធ្វើការហៅឯកសារ Font Awesome ដែលយើងបានទាញយកមកប្រើ។
សូមសរសេរកូដ CSS ដូចខាងក្រោម៖

css-icon2.png

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-icon3.png

ប្រភពដើម