การใส่ icon ให้กับเมนูนั้นจะช่วยให้เมนูของเรามีความสวยงามขึ้น สำหรับการใส่ icon นั้นไม่ยาก ลองทำกันดูนะค่ะ
เราสามารถใช้งานได้ 2 วิธีด้วยกันดังนี้

วิธีที่ 1.เราจะเรียก stylesheet จากเว็บโดยตรง เพื่อเรียกใช้ icon มาที่เว็บเรา
html

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

วิธีที่ 2.เราจะดาวน์โหลด stylesheet มาที่เว็บเราก่อนแล้วเรียก path ตามที่เรานำไปวาง
ดาวน์โหลด: https://fortawesome.github.io/Font-Awesome/

html

<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

 
ตัวอย่าง
demo

 
ขอบคุณที่มา: https://fortawesome.github.io/Font-Awesome/

Comments