ฟรีฟอนต์ไอคอนควบคุมด้วย CSS
15 ก.พ. 2016 , 4,923 Views , หมวดหมู่ WebDesign ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:css, font, Font Awesome, icon font
ฟอนท์ไอคอนควบคุมด้วย CSS ขยายขนาดใหญ่ไอคอนไม่มีแตก จาก http://fortawesome.github.io/Font-Awesome/
วิธีใช้งาน
แบบ CDN (ไม่ต้องดาวน์โหลดไฟล์ลงมา) เริ่มจากใส่โค๊ดด้านล่างในใวใน <head>
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
หรือ ดาวน์โหลดไฟล์ font-awesome.min.css ลงมาแล้วใส่โค๊ดข้างล่างนี้ใน (ตาม part ของไฟล์) <head>
|
1 |
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> |
แทรกโค๊ดด้านล่างนี้ในส่วนของ <body> เพื่อใช้งาน icon
|
1 |
<i class="fa fa-camera-retro"></i> |
ดูการใช้งานเพิ่มเติม http://fortawesome.github.io/Font-Awesome/get-started/
ตัวอย่างการแทรกโค๊ดใช้งาน font icon http://fortawesome.github.io/Font-Awesome/examples/
ตัวอย่างโค๊ด html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<html lang="en"> <head> <meta charset="utf-8"> <title>Icon Font</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x <div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a> </div> <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> <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> fa-twitter on fa-square-o<br> <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> fa-flag on fa-circle<br> <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> fa-terminal on fa-square<br> <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> fa-ban on fa-camera <i class="fa fa-shield"></i> normal<br> <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical </body> </html> |
See the Pen Use Font Icon From Font Awesome by Suttipong Choysakda (@nathanbc46) on CodePen.
ป้ายกำกับ:css, font, Font Awesome, icon font
