FONT AWESOME , Icon Font , Glyph font
ฟอนต์ อวีซัม ความหมายคือ ตัวอักษรแบบไอคอน (ไอคอน ฟอนต์ ) หรือ อักษรสัญลักษณ์ (ยิป ฟอนต์)
call home drive_eta mms
การเรียกขานโดยอ้างอิงตามแบบ
 Font Awesome = Font Awesome เช่น fa fa-bar-chart
 Google = Material Icons  (Google Icons)เช่น assessment
 Bootstrap = Icons BS Glyphicons เช่น  glyphicon glyphicon-cloud

ข้อดี
-ลงแค่ font เดียว ก็เหมือนได้ Icons ดีๆ มาใช้นับไม่ถ้วน
-สามารถปรับขนาดได้โดยง่ายเหมือน font ทั่วไป และยังแสดงผลได้อย่างคมชัด เพราะเป็น SVG (Infinite Scalability)
-ตกแต่งรูปแบบเพิ่มเติมได้ง่ายด้วย CSS (CSS Control )
-ออกแบบมาเพื่อให้ใช้ได้กับ Bootstrap โดยเฉพาะ (Made for Bootstrap)
-สามารถใช้ได้ฟรี แม้จะเป็น Commercial Use ก็ตาม (Free)

วิธีการใช้งาน การวางโค้ด  Font Awesome,Google Icons และ Icons BS Glyphicons
คัดลอกโค้ดไปใช้ได้เลยครับ
ส่วนที่1. วางโค้ดสีแดงลงในส่วน <head>

<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>  
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700|Open+Sans:400,700,400italic|Exo+2:700' media='all' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

* โค้ดนี้ใช้ได้ทั้งสามแบบเลยครับ
Font Awesome = Font Awesome
Bootstrap = Icons BS Glyphicons
Google = Google Icons

ส่วนที่ 2. การทำตัวอักษรสัญลักษณ์
-ใส่โค้ดตัวอักษรสัญลักษณ์ แทนที่สีน้ำเงิน
Font Awesome
-สัญลักษณ์กล้องถ่ายภาพ

<i class="fa fa-camera-retro fa-lg"></i> 
............
-สัญลักษณ์กล้องถ่ายภาพ พร้อมใส่ลิงก์

<a href=' ใส่ลิงก์ตรงนี้ครับ '><span class='fa fa-camera-retro fa-lg'/><span/></a>
............
-สัญลักษณ์หนังสือ ใส่ลิงก์ และ title

<a href="ใส่ลิงก์ " rel="nofollow" title="ใส่ title"><span class='fa fa-camera-retro fa-lg '/></span></a>
............
-สัญลักษณ์หนังสือ ใส่ลิงก์ และ title และ size fa-2x ,fa-3x, fa-4x


<a href="ใส่ลิงก์ " rel="nofollow" title="ใส่ title"><span class='fa fa-camera-retro fa-lg fa-3x'/></span></a>
............

Google Icons (material Icons)
-สัญลักษณ์ โทรศัพท์ call (ใส่โค้ดตัวอักษรสัญลักษณ์ แทนที่สีน้ำเงิน)
call
<i class="material-icons">call</i>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อม ใส่ลิงก์
call
<a href="ใส่ลิงก์" rel="nofollow" ><i class="material-icons">call</i></a>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อม ใส่ลิงก์ ใส่ title
call
<a href="ใส่ลิงก์" rel="nofollow" title="ใส่ title"><i class="material-icons">call</i></a>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อมใส่ลิงก์ ใส่ title และกำหนด size
call
<a href="ใส่ลิงก์" rel="nofollow" title="ใส่ title"><i class="material-icons"><span style="font-size: 65px;">call</span></i></a>
.............

Bootstrap
โค้ดนี้วางในส่วนของ <div class="container"> ครับ
-สัญลักษณ์ Signal icon:
    <div class="container">
    <span class="glyphicon glyphicon-signal"></span>
    </div>

ดูโค้ดตัวอักษรสัญลักษณ์ ข้างล่างนี้ครับ
Font Awesome

ดูเพิ่มเติมได้ที่ http://fontawesome.io/icons/ 
Google Icons ดูเพิ่มเติม https://material.io/icons/

ดูเพิ่มเติมได้ที่ดูเพิ่มเติม https://material.io/icons/ และ http://fontawesome.io/icons/ และ https://www.w3schools.com/icons/icons_reference.asp

Font Awesome
Icons Brand
Icons Chart
Icons Currency
Icons Directional
Icons File Type
Icons Form
Icons Gender
Icons Hand
Icons Medical
Icons Payment
Icons Spinner
Icons Text
Icons Transportation
Icons Video
Icons Web Application

Bootstrap
Icons BS Glyphicons

Google
Google Icons
Icons Action
Icons Alert
Icons AV
Icons Communication
Icons Content
Icons Device
Icons Editor
Icons File
Icons Hardware
Icons Image
Icons Maps
Icons Navigation
Icons Notification
Icons Places
Icons Social
Icons Toggle