วิธีการเรียกใช้งาน Google Icon

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

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

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

วิธีการเรียกใช้งาน Google Icon

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

Google Icon เป็นส่วนหนึ่งของบริการ Google Chart API การออกแบบและพัฒนาไอคอนในรูปแบบต่าง ๆ เพื่อการนำไปใช้งานบนเว็บไซต์ รวมถึงการแทรกไอคอนลงใน Google Maps ได้อย่างรวดเร็ว โดยทาง Google จะเน้นไปในเรื่องของความชัดเจน ใช้งานง่าย และมีความสวยงาม ในการแสดงผลบนแพลตฟอร์ม

รูปภาพ

การเรียกใช้งาน API แบ่งออกได้เป็น 2 วิธี
  • วิธีที่ 1 เรียกใช้งานบน Html :

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  • วิธีที่ 2 เรียกใช้งานบน hosting ของตนเอง :

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

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

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

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
การใช้งาน Icon บน Html :

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

<i class="material-icons">face</i>
ตัวอย่างการใช้งานจริง :

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

<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>

<body>
<center>
<br/><br/>

<i class="material-icons">android</i>
<i class="material-icons">account_balance</i>
<i class="material-icons">alarm_add</i>
<i class="material-icons">bookmark_border</i>
<br/><br/>

<i class="material-icons md-48">face</i> 
<i class="material-icons">remove_shopping_cart</i>
<i class="material-icons">aspect_ratio</i>
<i class="material-icons">build</i>
</center>

</body>
</html>
Browser ที่รองรับการใช้งาน
- Google Chrome 11
- Mozilla Firefox 3.5
- Apple Safari 5
- Microsoft IE 10
- Opera 15
- Apple MobileSafari iOS 4.2
- Android Browser 3.0

สามารถเลือกใช้งานไอคอนได้ที่ : https://material.io/icons/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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