การปรับขนาดicon

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

Kanjana kamkun
PHP Hero Member
PHP Hero Member
โพสต์: 130
ลงทะเบียนเมื่อ: 07/12/2020 9:49 am

การปรับขนาดicon

โพสต์ที่ยังไม่ได้อ่าน โดย Kanjana kamkun »

การปรับขนาดicon font
การใช้ css ในการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารในเว็บเพจทำให้เอกสารมีความเข้าใจง่ายขึ้น การใช้ icon เข้ามาช่วยจะทำให้ลดการอธิบายในการทำงานการโดยการใช้สัญลักษณ์เเทนนการอธิบายเป็นข้อความที่เป็นข้อความสั้นๆทำให้เกิดความเข้าใจง่ายทำให้มีหน้าตาและสีสีสันที่สะดุดตาช่วยลดเอกสารที่หน้าตาที่คล้ายหรือซ้ำกันได้ทำให้เกิดความแปลกใหม่

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<title>วิธีปรับนาด</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
     <!-- ปรับขนาดของ font-sizel  -->
<i class='	fas fa-ice-cream'></i>
<i class='	fas fa-ice-cream' style='font-size:50px'></i>
<i class='	fas fa-ice-cream' style='font-size:100px'></i>
<i class='	fas fa-ice-cream' style='font-size:150px;color:rgba(185, 50, 133, 0.87)'></i>
<br>
</body>
</html>

รูปแบบการปรับขนาดจะเป็นการปรับขนาดจากซ้ายไปขวา การปรับขนาดสามารถปรับขนาดได้ตามความเหมาะสม
CSS Knowledge-1.png
CSS Knowledge-1.png (19.55 KiB) Viewed 3988 times

อ้างอิง
https://www.w3schools.com/
ศึกษาเพิ่มเติม viewtopic.php?f=73&t=37755&p=90099&hilit=icon#p90099
แก้ไขล่าสุดโดย Kanjana kamkun เมื่อ 15/12/2020 11:51 am, แก้ไขไปแล้ว 2 ครั้ง.
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: การปรับขนาดicon

โพสต์ที่ยังไม่ได้อ่าน โดย Duanghathai Termtem »

ข้อความ ไทยอังกฤษ เว้น 1 วรรค
โค้ดที่ยกตัวอย่างมา ไม่ได้ ผล ตามรูป **
หัวข้อไม่ได้บอกถึงประโยชน์
ข้อความน้อยเกินไป (ไม่ต่ำกว่า 1200 ตัวอักษร)
เพิ่มบทสรุป ลิงค์อ่านต่อไม่มี
Kanjana kamkun
PHP Hero Member
PHP Hero Member
โพสต์: 130
ลงทะเบียนเมื่อ: 07/12/2020 9:49 am

Re: การปรับขนาดicon

โพสต์ที่ยังไม่ได้อ่าน โดย Kanjana kamkun »

Duanghathai Termtem เขียน: 15/12/2020 11:05 am ข้อความ ไทยอังกฤษ เว้น 1 วรรค
โค้ดที่ยกตัวอย่างมา ไม่ได้ ผล ตามรูป **
หัวข้อไม่ได้บอกถึงประโยชน์
ข้อความน้อยเกินไป (ไม่ต่ำกว่า 1200 ตัวอักษร)
เพิ่มบทสรุป ลิงค์อ่านต่อไม่มี
รับทราบค่ะ
Kanjana kamkun
PHP Hero Member
PHP Hero Member
โพสต์: 130
ลงทะเบียนเมื่อ: 07/12/2020 9:49 am

Re: เทคนิคการปรับขนาด icon css

โพสต์ที่ยังไม่ได้อ่าน โดย Kanjana kamkun »

เทคนิคการปรับขนาด icon css
การใช้ css ในการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารในเว็บเพจทำให้เอกสารมีความเข้าใจง่ายขึ้น การใช้ icon จะเป็นรูปภาพขนาดเล็กเข้ามาช่วยจะทำให้ลดการอธิบายในการทำงานการโดยการใช้สัญลักษณ์เเทนนการอธิบายเป็นข้อความที่เป็นข้อความสั้นๆทำให้เกิดความเข้าใจง่ายทำให้มีหน้าตาและสีสีสันที่สะดุดตาช่วยลดเอกสารที่หน้าตาที่คล้ายหรือซ้ำกันได้ทำให้เกิดความแปลกใหม่
โค้ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<title>วิธีปรับนาด</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
     <!-- ปรับขนาดของ font-sizel  -->
<i class='	fas fa-ice-cream'></i>
<i class='	fas fa-ice-cream' style='font-size:50px'></i>
<i class='	fas fa-ice-cream' style='font-size:100px'></i>
<i class='	fas fa-ice-cream' style='font-size:150px;color:rgba(185, 50, 133, 0.87)'></i>
<br>
</body>
</html>
ผลรัน
Capture.PNG
Capture.PNG (8.74 KiB) Viewed 3958 times
อ้างอิง
https://www.w3schools.com/
ศึกษาเพิ่มเติม
viewtopic.php?f=73&t=37755&p=90099&hilit=icon#p90099
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: การปรับขนาดicon

โพสต์ที่ยังไม่ได้อ่าน โดย Duanghathai Termtem »

ตั้งชื่อภาพ
ข้อความน้อยกว่า 1200 ตัวอักษร
ขาดส่วนสรุปและการเชื่อมลิงค์
Kanjana kamkun
PHP Hero Member
PHP Hero Member
โพสต์: 130
ลงทะเบียนเมื่อ: 07/12/2020 9:49 am

Re: การปรับขนาดicon

โพสต์ที่ยังไม่ได้อ่าน โดย Kanjana kamkun »

Duanghathai Termtem เขียน: 22/12/2020 12:59 pm ตั้งชื่อภาพ
ข้อความน้อยกว่า 1200 ตัวอักษร
ขาดส่วนสรุปและการเชื่อมลิงค์
รับทราบค่ะ
Kanjana kamkun
PHP Hero Member
PHP Hero Member
โพสต์: 130
ลงทะเบียนเมื่อ: 07/12/2020 9:49 am

Re: เทคนิคการปรับขนาด icon css

โพสต์ที่ยังไม่ได้อ่าน โดย Kanjana kamkun »

เทคนิคการปรับขนาด icon css
การใช้ css ในการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารในเว็บเพจทำให้เอกสารมีความเข้าใจง่ายขึ้น การใช้ icon จะเป็นรูปภาพขนาดเล็กเข้ามาช่วยจะทำให้ลดการอธิบายในการทำงานการโดยการใช้สัญลักษณ์เเทนนการอธิบายเป็นข้อความที่เป็นข้อความสั้นๆทำให้เกิดความเข้าใจง่ายทำให้มีหน้าตาและสีสีสันที่สะดุดตาช่วยลดเอกสารที่หน้าตาที่คล้ายหรือซ้ำกันได้ทำให้เกิดความแปลกใหม่
โค้ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<title>วิธีปรับนาด</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
     <!-- ปรับขนาดของ font-sizel  -->
<i class='	fas fa-ice-cream'></i>
<i class='	fas fa-ice-cream' style='font-size:50px'></i>
<i class='	fas fa-ice-cream' style='font-size:100px'></i>
<i class='	fas fa-ice-cream' style='font-size:150px;color:rgba(185, 50, 133, 0.87)'></i>
<br>
</body>
</html>
ผลรัน
ผลรัน
ผลรัน
CSS Knowledge-1.png (19.55 KiB) Viewed 3912 times
ในการพัฒนาระบบเว็บ ให้มีความสวยงาม เพื่อไม่ให้ระบบเกิดความช้ำในระบบ css สามารถปรับเเต่งการเพิ่มสี หรือ การเพิ่ม ขนาดของ css สามารถทำงานกับฟังก์ชั่นได้หลายตัว เช่น การใส่ปุ่ม หรือ การทำเป็นโลโก้ และ การใส่ภาพพื้นหลัง เราสามารถใช้ประโยชน์จาก css ได้

อ้างอิง
https://www.w3schools.com/
ศึกษาเพิ่มเติม
viewtopic.php?f=73&t=37755&p=90099&hilit=icon#p90099
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 62