使ç¨é¿éçãåä½å¾æ ãææçææ
1.é¿éå·´å·´iconçç½ç«
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
2.注åè´¦å·ï¼æè ç¨èªå·±çå¾®åè´¦å·æè Githubè´¦å·ç»éåï¼æ¾å°å¾æ 管ç->æç项ç®->ç¶åæ°å»ºé¡¹ç®:
å³è¾¹ç¹å»æ°å»ºé¡¹ç®,ç¨äºä¿åèªå·±å¸¸ç¨çå¾æ ;
3.项ç®æ°å»ºå®æå,å¾é¡¹ç®éæ·»å æ们è¦æ³ä½¿ç¨çå¾æ ,æ¾å°å¾æ åº,æç´¢ä¸ä¸ªæ³è¦çå¾æ ,ç¶åæ·»å å°è´ç©è½¦(åç´æ¥æ·»å è³æ°å»ºé¡¹ç®);æ·»å å°è´ç©è½¦å®æå,è´ç©è½¦å¾½ç« æ°ååºè¯¥æ¾ç¤º4äº,ç¹å»å³ä¸è§çè´ç©è½¦å¾æ ,éæ©æ·»å è³é¡¹ç®,éæ©æ们ååå建ç项ç®,ç¡®å®;
4.å°æå 好çåä½æ件ä¸è½½å°æ¬å°æ·»å å°ä½ ç项ç®ä¸,å¨é¡¹ç®ä¸å¼ç¨æ件ä¸çiconfont.cssæ件;
5.ä¸è½½è§£å好åï¼å°iconfont.cssæ件æ¾å ¥èªå·±ç项ç®ä¸ãå¼å ¥é¡¹ç®ä¸é¢çæç fontclass 代ç ï¼
<link rel="stylesheet" href="./iconfont.css">6.æéç¸åºå¾æ 并è·åç±»åï¼åºç¨äºé¡µé¢ï¼
<span class="iconfont iconxxx"></span>7.æç»ææï¼
7.1æ´æ¹å¾æ çé¢è²ï¼
æå¼iconfont.cssæ件ï¼ä¿®æ¹ä»£ç å¦ä¸ï¼
7.2æ´æ¹å¾æ 大å°ï¼
8.éå½ï¼
html代ç ï¼
<!DOCTYPE html>
<html>
<head>
<title>HTMLå¦ä¹ </title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="./iconfont.css">
</head>
<body>
<div class="icon-box">
<ul>
<li class="icon-item"><i class="iconfont icontengxunshipin pt"></i></li>
<li class="icon-item"><i class="iconfont iconqq-square pt"></i></li>
<li class="icon-item"><i class="iconfont iconweixin pt"></i></li>
<li class="icon-item"><i class="iconfont iconweibo pt"></i></li>
</ul>
</div>
</body>
</html>iconfont.cssæ件代ç
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1555212751618');
/* IE9 */
src: url('iconfont.eot?t=1555212751618#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('iconfont.woff?t=1555212751618') format('woff'), url('iconfont.ttf?t=1555212751618') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1555212751618#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #616161;
}
.iconweibo:before {
content: "\e658";
}
.iconweixin:before {
content: "\e7b4";
}
.icontengxunshipin:before {
content: "\e636";
}
.iconqq-square:before {
content: "\e703";
}
.icon-box {
background-color: #333;
}
.icon-item {
display: inline-block;
margin-right: 8px;
}
.pt {
font-size: 30px;
}