ในหัวข้อนี้จะมาแนะนำ icon น่ารัก ๆ
ของ CSS โดยประกาศ Link การเรียกใช้ไว้ในระหว่าง <head></head> ดังนี้
โค้ด: เลือกทั้งหมด
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
หลังจากนั้นประกาศเรียกใช้ใน <body></body>
โค้ด: เลือกทั้งหมด
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
Output
- icon1.png (1.14 KiB) Viewed 1928 times
และเรายังสามารถนำมาประยกต์ใช้เพิ่มขนาด สี หรือทำเป็นปุ่มกด(<button class="?">)ก็ได้
Ex.1
โค้ด: เลือกทั้งหมด
<i class="fa fa-heart" style="font-size:100px; color: red;"></i>
<i class="fa fa-heart" style="font-size:150px; color: yellow;"></i>
<i class="fa fa-heart" style="font-size:200px; color: green;"></i>
Output_Ex1
- icon3.png (8.64 KiB) Viewed 1926 times
ในหัวข้อนี้จะมาแนะนำ icon น่ารัก ๆ :-D ของ CSS โดยประกาศ Link การเรียกใช้ไว้ในระหว่าง <head></head> ดังนี้
[code]<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>[/code]
หลังจากนั้นประกาศเรียกใช้ใน <body></body>
[code]
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
[/code]
Output :-D
[attachment=1]icon1.png[/attachment]
และเรายังสามารถนำมาประยกต์ใช้เพิ่มขนาด สี หรือทำเป็นปุ่มกด(<button class="?">)ก็ได้
Ex.1
[code]<i class="fa fa-heart" style="font-size:100px; color: red;"></i>
<i class="fa fa-heart" style="font-size:150px; color: yellow;"></i>
<i class="fa fa-heart" style="font-size:200px; color: green;"></i>[/code]
Output_Ex1 :-o
[attachment=0]icon3.png[/attachment]