แนะนำ icon CSS น่ารัก ๆ

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: แนะนำ icon CSS น่ารัก ๆ

แนะนำ icon CSS น่ารัก ๆ

โพสต์ โดย Dive Demo » 01/02/2017 6:57 pm

ในหัวข้อนี้จะมาแนะนำ icon น่ารัก ๆ :-D ของ 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 :-D
icon1.png
icon1.png (1.14 KiB) เปิดดู 326 ครั้ง


และเรายังสามารถนำมาประยกต์ใช้เพิ่มขนาด สี หรือทำเป็นปุ่มกด(<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 :-o

icon3.png
icon3.png (8.64 KiB) เปิดดู 324 ครั้ง

ข้างบน