การใส่ 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> 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>
วิธีที่ 2.เราจะดาวน์โหลด stylesheet มาที่เว็บเราก่อนแล้วเรียก path ตามที่เรานำไปวาง
ดาวน์โหลด: https://fortawesome.github.io/Font-Awesome/
Sponsered link
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> 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>
ตัวอย่าง
ขอบคุณที่มา: https://fortawesome.github.io/Font-Awesome/
Sponsered link