資訊專欄INFORMATION COLUMN
摘要：用畫了三個圖標，叉號，排行符號，搜索符號。我們用和偽類來分別當一個矩形框，然后進行旋轉即可得到叉號。我們用添加類的形式插入叉號，當我們需要插入叉號時，我們額外添加一個標記，并添加類。方便相對于父元素進行定位第二步，設置偽類，畫叉號。
用CSS畫了三個圖標，叉號，排行符號，搜索符號。先上效果圖啦啦啦。
附上CodePen鏈接，點我點我
思路用叉號舉例哈。叉號可以看作兩個互相垂直的矩形框。矩形框可以用width和height和backgrond-color來表現，也可以用height和border-left和border-right和border-color來表現。我們用::before和::after偽類來分別當一個矩形框，然后進行旋轉即可得到叉號。
我們用添加類的形式插入叉號，當我們需要插入叉號時，我們額外添加一個標記，并添加類icon-cross。
第一步，設置圖標尺寸。
.icon-cross{
width: 20px;
height: 20px;
position: absolute; /*方便相對于父元素進行定位*/
}
第二步，設置偽類，畫叉號。
.icon-cross::before,
.icon-cross::after{
content: "";
position: absolute; /*方便進行定位*/
height: 16px;
width: 1.5px;
top: 2px;
right: 9px; /*設置top和right使圖像在20*20框中居中*/
}
.icon-cross::before{
transform: rotate(45deg); /*進行旋轉*/
}
.icon-cross::after{
transform: rotate(-45deg);
}
為了讓矩形框有一定圓角好看點，可在偽類樣式中追加border-radius: 1px;。另外，為了使20*20的框能在父元素中垂直居中，我們給.icon-cross追加樣式top: 50%; margin-top: -10px;。上邊距為父元素高度的50%，然后再上移10px，這樣就垂直居中了哦。（10px為自身高度一半。如果圖標高度是18px，那么就是上移9px。）
要設置在父元素中的水平位置，可設置left或right。
為了能根據父元素進行定位，父元素務必position:relative||absolute;。
還要注意一點，由于我們沒有設置background-color，所以這時候是還啥都看不到。我喜歡在插入圖標時，再另外設置背景顏色，這樣可以在不同地方反復插入這個圖標，并分別設置不同的顏色。當然，你也可以設置一個顏色作為默認值。
具體的插入圖標示例見開頭的CodePen吧。
補充：我個人比較喜歡用border來當色塊啦，這樣可以設置偽元素border-color: inherit;，然后直接設置類的邊框顏色就行了。如果是用width和height來當色塊的話，就只能多帶帶設置偽類的background-color，覺得麻煩。但是用border來做的話，IE11和Edge在網頁縮放時有時候會在中間多一條縫..很丑陋..
附上CSS圖標庫代碼。（現在只有三個圖標哈哈）
/*----圖標大小為20px*20px，已經設置好在父元素中垂直居中，
只需另外設置left或者right來調整水平位置----*/
/*----通用設置----*/
[class|=icon]{ /*所有類名以“icon-”開頭的*/
width: 20px;
height: 20px;
top: 50%; /*上邊距為父元素50%*/
margin-top: -10px; /*再往上移動自身高度一半，就垂直居中了*/
position: absolute; /*有些圖標高度不是20px，那么margin-top要多帶帶設置*/
}
[class|=icon]::before, /*所有類名以“icon-”開頭的偽元素*/
[class|=icon]::after{
content: "";
position: absolute;
height: 0;
width: 0;
}
/*---------叉號---------*/
.icon-cross::before,
.icon-cross::after{
height: 16px;
width: 1.5px;
top: 2px;
right: 9px; /*設置right和top使叉號居中*/
border-radius: 1px;
}
.icon-cross::before{
transform: rotate(45deg);
}
.icon-cross::after{
transform: rotate(-45deg);
}
/*----------排行榜----------*/
.icon-ranklist,
.icon-ranklist::before,
.icon-ranklist::after{
width: 4px;
border-radius: 1px;
}
.icon-ranklist::before,
.icon-ranklist::after{
bottom: 0;
background: inherit;
}
.icon-ranklist{
height: 18px;
margin-top: -9px;
margin-left: 8px;
margin-right: 8px; /*這樣排行榜圖標寬度可以當作20px*/
}
.icon-ranklist::before{
height: 12px;
left: -6px;
}
.icon-ranklist::after{
height: 10px;
right: -6px;
}
/*----------搜索圖標----------*/
.icon-search::before{
height: 12px;
width: 12px;
border-radius: 12px;
border: 2px solid;
top: 1px;
left: 1px;
border-color: inherit;
}
.icon-search::after{
height: 7px;
border-left: 1.5px solid;
border-right: 1.5px solid;
border-radius: 1.5px;
right: 3px;
bottom: 0px;
transform: rotate(-45deg);
border-color: inherit;
}
存在的問題
最近才發現的，網頁縮放后，圖標會有些變形，比如叉號會一根線長點另一根線短點，只有在100%大小時才能完全是你想要的效果，哭...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115404.html
摘要：方案由于圖標圖片比較多，而且體積很小，為了減少請求所以很多時候我們會用雪碧圖這種技術來將圖標拼湊在同一張圖片里面。你也能想到，一堆圖標的雪碧圖，修改維護會相當麻煩現在比較好的方案是使用引入圖片，小圖直接轉換成插入中。 來，干了這碗安利 寫這篇文章的目的其實就是為了安利一下我的圖標庫：iconoo，所以，開門見山，star吧少年少婦們！（這樣的我是不是應該要加個github互粉的團伙了？...
摘要：說到這里，大家該明白了上面的三角形圖標是怎么來的了吧元素沒有下邊框，而左右邊框又是透明的，相當于只有上圖中的上面的黑色三角形部分。所以，如果我們要做倒立三角形向右的或者向左的三角形，只需要為三角形底部設置邊框，兩腰邊框透明即可。 原文 http://itindex.net/detail/487...三角形-圖標 網頁中經常有一種三角形的圖標，鼠標點一下會彈出一個下拉菜單之類的（之前淘...
摘要：本文主要針對小程序無聊廣場的前端開發內容做總結，記錄常見的一些老生常談的進階手法，對小程序中的動畫音頻等踩坑做出解決方案。 背景 一個交互不復雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導的解決方案，使用dom操作一樣可以完成。節省了cocos creater的學習成本，值得一試。本文主要針對小程序無聊廣場的前端開發內容做總結，記錄常見的一些老生常談的進階手法，對...
摘要：網頁小圖標到處可見，如果一個網頁都是干巴巴的文字和圖片，而沒有小圖標，會顯得非常簡陋。直接看代碼鏈接鏈接鏈接鏈接得出的結果就是其他應用還有其他更加復雜一點的應用，包括固定寬度浮動反轉旋轉疊加圖標等。 引言 奧森圖標（Font Awesome）提供豐富的矢量字體圖標—通過CSS可以任意控制所有圖標的大小 ，顏色，陰影。 網頁小圖標到處可見，如果一個網頁都是干巴巴的文字和圖片，而沒有小圖標...
閱讀 3548·2021-08-31 09:39
閱讀 1854·2019-08-30 13:14
閱讀 2918·2019-08-30 13:02
閱讀 2769·2019-08-29 13:22
閱讀 2340·2019-08-26 13:54
閱讀 766·2019-08-26 13:45
閱讀 1586·2019-08-26 11:00
閱讀 982·2019-08-26 10:58
