PC端使用iconfont圖標

時間 2019-11-20

標籤使用 iconfont 圖標简体版

原文原文鏈接

原來看過iconfont，可是沒用過，今天嘗試着用了一下！看看怎麼用的：css

第一步：下載html

講本身須要的圖標（能夠經過搜索查找）添加到暫存駕，之前是購物車！而後點下載或者存儲到CDN。chrome

這個圖是偷的：svg

第二步：看看url

下載後大概是這個樣子：spa

裏面有個demo.html，打開看看，上面詳細講解了圖標的class、字符實體。固然了，還有使用方法firefox

3、使用：code

字符實體方式：orm

HTML:htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="iconfont">&#xe641;</div>
<!-- 這裏的字符實體在demo.html指出了 -->
</body>
</html>

CSS:

@font-face {
    font-family: 'iconfont';
    src: url('ux/iconfont.eot'); /* IE9*/
    src: url('ux/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('ux/iconfont.woff') format('woff'), /* chrome、firefox */
    url('ux/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('ux/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
}

class方式：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>    
    <link rel="stylesheet" type="text/css" href="ux/iconfont.css">
    <!-- 注意這裏導入的是哪一個css -->
</head>
<body>
<i class="icon-qq iconfont"></i>
<!-- 這裏的class名在demo.html指出了，可是加上了icon-前綴 -->
</body>
</html>

這就夠了！

相關標籤/搜索

每日一句

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