使用@font-face來實現icon

時間 2019-12-11

標籤使用 font face 實現 icon 简体版

原文原文鏈接

@font-face製做Web Icon

@font-face規則在css2中已經存在，但在css2.1中被刪除，在css3中又從新被引入。自從Metro 風格被大多前段程序員青睞後，使用@font-face製做web icon 已經普遍使用於網頁設計

下面例子是製做Metro風格按鈕

1.在網站 http://icomoon.io/app/上下載所需的圖標

壓縮包中包含有相應的例子

2.把fonts文件夾添加都你的網頁文件中，

在css文件中初始化字體樣式

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.ttf') format('truetype'),

url('fonts/icomoon.svg#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

3.引用字體樣式

[data-icon]:before {

font-family: 'icomoon';

content: attr(data-icon);

speak: none;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

4.下面是html代碼

<!doctype html>

<html>

<head>

<title>使用@font-face來實現icon</title>

</head>

<body>

</body>

</html>

4.爲btn添加css樣式

.btn{ display:block; height:100px;line-height:100px; width:100px; background:#09F; text-align:center; font-size:3em; cursor:pointer;

}

5.效果圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。