ทำไอคอนเว็บสวยด้วย Symbols web fonts [ไม่ต้องใช้รูปภาพ]


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


ตัวอย่าง วิธีใช้งานโดยการเอาโค้ด html ไปว่างได้เลยครับ

1
2
3
4
5
<!-- HTML -->
Simple use for mailto link.
<a class="lsf" href="mailto:[email protected]">mail</a>
Use tha icon with text.
<a class="lsf-icon" title="twitter" href="http://twitter.com/">Twitter</a>

โค้ด css ครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* CSS */
@font-face {
font-family: 'LigatureSymbols';
src: url('LigatureSymbols-2.05.eot');
src: url('LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('LigatureSymbols-2.05.woff') format('woff'),
url('LigatureSymbols-2.05.ttf') format('truetype'),
url('LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
src: url('LigatureSymbols-2.05.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.lsf {
font-family: 'LigatureSymbols';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.lsf-icon:before {
content:attr(title);
margin-right:0.3em;
font-size:130%;
font-family: 'LigatureSymbols';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

ดาวน์โหลด…..!!!


ขอบคุณข้อมูลจาก http://kudakurage.com

Comments

comments

Powered by Facebook Comments