整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
web開發中，我們經常要用到一些小圖標（加減勾叉等）。通常做法就兩種：
1、直接使用圖片；
2、使用css/svg直接在瀏覽器中繪制圖標；
方案1
由于圖標圖片比較多，而且體積很小，為了減少請求，我們需要用雪碧圖將圖標拼湊在同一張圖片里面，修改維護十分麻煩！
現在比較好的方案是使用webpack引入圖片，小圖直接轉換成base64插入css中。直接使用圖片比較簡單，這也是目前比較主流的做法。
● 方案2
相比方案1，明顯可以減小資源的體積，只需要幾條css/svg命令就可以繪制出精美的圖標，而且不受圖片尺寸限制，可大可小非常靈活。
初看方案2的一堆代碼可能會覺得非常難，但其實很多簡單的圖標都是非常容易實現的。
接下來就是同學們最期待的小智手把手教學時間啦。
01 暫停按鈕
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>02 加號按鈕
.box{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -35px;
cursor: pointer;
}
</style>
<body>
<div class="box"></div>
</body>03 關閉按鈕
<style>
.box{
width: 30px;
height: 0;
color: black;
box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
}
</style>
<body>
<div class="box"></div>
</body>04 菜單按鈕
用陰影實現
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>用背景裁剪實現
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>用漸變函數實現
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
}
</style>
<body>
<div class="box"></div>
</body>05 文章圖標
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
outline: 18px solid #ffffff;
outline-offset: -25px;
transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>06 單選按鈕
.box{
width:0;
color: #000;
border: 3px solid black;
outline: 6px dotted ;
outline-offset: 6px;
}
.box{
width:0;
padding: 3px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}
.box{
height: 6px;
width: 6px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}07 靶子圖標
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}08 田字圖標
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}09 下載箭頭
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}10 下載箭頭（帶橫線）
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}11 禁用圖標
可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。
（1）iconmoon字體圖標庫：https://icomoon.io/app
（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/
（3）font-awesome字體圖標庫：
以iconmoon為例
（1）選擇需要的圖標并下載
1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同
a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。
b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。
d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。
其他字體
e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。
2）字體轉換
https://www.fontke.com/tool/convfont/
（2）字體圖標的引入
1）把字體放到項目的相應位置
將下載解壓后的fonts文件夾放到項目路徑下
2）在html頁面中引入字體
利用CSS的@font-face屬性，引入外部字體；
在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。
在html的style標簽中引入如下代碼：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）為元素用該字體
span {
font-family: "icomoon";
}4）為元素添加內容
復制demo.html中需要的圖標，如下，將其作為元素的內容。
<span>?</span> （3）新增字體圖標的引入
當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。
在進行前端開發時，圖標庫的使用是一項必須掌握的技巧，目前流行的圖標庫有fontawesome，iconfont等，只需要引入到項目中，然后使用對應的class，就會得到對應的圖標。
但是你們有沒有想過，如果是自己的話該怎么去實現這些圖標呢？今天我們就來看看一些稍微復雜的圖標是如何使用純CSS3實現吧。
文中的代碼已經放到github上了，感興趣的同學自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我們可以先來看看稍微復雜的圖標的樣子。
圖標庫
從圖標中可以看出，都是平時很常用的正確，錯誤，方向鍵，放大，縮小，開鎖，解鎖等。
我們從中抽取幾個，慢慢分析它們是如何實現的吧。
水杯的圖標如下所示。
水杯圖標
我們對水杯圖標進行拆分，分為杯身和杯柄兩個部分。
杯身中的白色長方形就是一個div，設置寬度和高度。
杯身的四周為黑色都是通過border實現，border-bottom比其他三個放向都要大。
杯身的下方是圓角，通過border-radius設置，border-radius的右下和左下方向設置相同的值。
通過上述的分析，我們可以得到杯身部分的CSS代碼。
杯身CSS代碼
杯柄通過偽元素:before實現。
杯柄設置為絕對定位，修改right值讓中間出現一個空白。
調整杯柄位置的寬度，只需要和杯身重疊即可。
杯柄右上角和右下角的border-radius設置為特定的值，展現成圓角的樣子。
通過以上的分析，我們可以得到杯柄部分的CSS代碼。
杯柄CSS代碼
首先我們來看看心形圖案的樣子。
心形圖案
接下來我們同樣將整個圖案拆分來看，分成左右兩個部分，我們將上述圖案換成兩種不同顏色就一目了然了。
拆分圖案
從圖案中可以看出，它實際是由兩個相同的圖行旋轉不同的角度構成，相同的元素部分，可以通過設置border-radius值來實現。
我們將左右兩個半邊的形狀分別通過:before和:after來實現，原始的的div形狀的CSS屬性則很簡單，只需要設置相對位置和寬度為0即可。
基本CSS屬性
然后看看:before和:after共有的屬性，主要是保證為元素部分的定位為絕對定位，然后設置border-radius的值， 保證上半部分是圓角。
共有CSS屬性
然后是關鍵的兩半邊各自的CSS屬性。左側的圖形距左邊應該為0，所以left: 0，右側的圖形距右側為0，所以right: 0。
各有的CSS屬性
同時左右兩側圖案需要進行旋轉，這里我們選擇旋轉48度，這是為什么呢？
很多人一下子可能會想到旋轉45度，我們來看看旋轉45度時的樣子。
旋轉45度
從圖形中可以看出，兩側有棱角，整個圖案就顯得不標準，當旋轉超過45度時，棱角的部分就會被里面的圖案遮住。
所以這里我們選擇旋轉48度，達到最終的效果。
最終效果圖
今天這篇文章我們使用純CSS3的屬性畫出了一個杯子和心形兩個稍微復雜點的圖案，其實其它圖案也是類似的，只要我們能將其拆分，每個部分獨立實現，再組合就可以達到圖標庫的效果了。
大家也可以自己動手實現一下噢~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
