|
原文鏈接：https://www./blog/blog.php?id=000iac1hj&title=iconfont字體圖標和各種CSS小圖標
前言：這是筆者學習之后自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續(xù)更新！
?
iconfont字體圖標
我們的需求中，很多時候會看到一些小的圖形，或者叫圖標，比如天貓網(wǎng)站中：
 ? ? ??
這些小圖形我們可以用圖片代替，通常我們是把這些圖形切圖之后做成精靈圖（又叫雪碧圖）；
精靈圖的原理：把很多小圖片集合成一張大圖片，然后用設(shè)置背景圖的位置來顯示圖片；
精靈圖的優(yōu)點：減少服務器的請求次數(shù)，降低服務器壓力；
sprites是一款很好的精靈圖制作工具；
?
當然還有其他的方法可以制作這些小的圖形，比如上圖中，天貓使用的字體圖標iconfont；
字體圖標，顧名思義，就是一種字體，和字體一樣，是矢量的，我們也叫矢量圖標，任意放大縮小，都不會失真；
網(wǎng)絡中有很多字體圖標庫，這里我介紹一下iconfont的使用：
官網(wǎng)：http://www./?
?
我就不說怎么制作了，我們直接使用吧（呵呵，其實我畫的圖太丑）；
原本準備寫一下使用方法的，但是iconfont好像又升級了，加入了symbol寫法，支持多色圖標了（這涉及到SVG的知識），官網(wǎng)的幫助文檔的GIF圖也很好的解釋了怎么應用，我就寫一下我第一次用的時候遇到過的坑吧：
- "下載代碼"按鈕，希望你能直接找到。嗯，我找了好一會，默認讓我去設(shè)置顏色和大小去了，這個是去弄素材的，前端只要代碼就可以了,點擊撤銷，然后...；
? 不知道是我電腦問題（1366*768）還是怎么回事？這個"下載代碼"按鈕被我的windows底部工具欄擋住了一半，嗯，這個...
? ? ? ? ?
?
- 當我們把字體圖標下載下來之后，它就是一個文件了，我們是在css里定義字體類型的時候，別忘了把路徑設(shè)置正確；
- 如果我們使用的是iconfont的在線項目（沒有下載文件），當項目成員更新了圖標，如果我們也想用新的圖標，就也得更新"在線鏈接"；
- 字體不支持多色，如果我們使用下載文件的方式，那就只能用字體顏色設(shè)置單色了。想使用多色圖標，就得用symbol引用在線鏈接的方式；symbol引用的是js文件，font-class引用的css文件，兩種方式的寫法也是不一樣的；
?
CSS小圖標
大師們用css制作出了各種純css圖形，我這里就只列舉幾種我用的比較多的；
三角形
請看這篇，?border三角形陰影和多重邊框的整理轉(zhuǎn)述?；
菜單（三道杠）
用border上邊框雙線和下邊框?qū)嵕€，也可以反著來：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.menu{
margin: 100px;
width: 55px;
height: 10px;
border-top: 30px double #f00;
border-bottom: 10px solid #f00;
/*用border上邊框雙線和下邊框?qū)嵕€，也可以反著來*/
}
</style>
</head>
<body>
<div class="menu"></div>
</body>
</html>
View Code
?
內(nèi)凹角
大師的方法，點擊這里，用css3屬性徑向漸變radial-gradient做:
背景圖徑向漸變可以設(shè)置：圓心位置，漸變的大小，漸變的形狀，圓心處的顏色 寬度， ... ，結(jié)尾處的顏色寬度;
 
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
a{text-decoration: none;cursor: pointer;}
li{list-style: none;}
/*清除浮動*/
.clearfix:before, /*:before處理margin上下重疊*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.test{
margin: 100px 0 0 100px ;
}
.list{
margin-left: -20px;
}
.content{
width: 320px;
background: #7fd6f1;
min-height: 200px;
}
.item .active{
background: #7fd6f1;
color: #333;
}
.item{
float: left;
margin-left: 30px;
}
.item a{
display: block;
background: #ce4be2;
width: 80px;
height: 35px;
text-align: center;
line-height: 35px;
color: #fff;
border-radius: 10px 10px 0 0;
position: relative;
}
.item a:after{
content: "";
display: block;
position: absolute;
right: -9px;
/*不知大家是否發(fā)現(xiàn)，在邊緣處其實是有1px的變化的，弧度到最后不是很自然，這里我們其實可以把位置往里1px*/
bottom: 0;
width: 10px;
height: 10px;
background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
/*背景圖徑向漸變可以設(shè)置：圓心位置，漸變的大小，漸變的形狀，圓心處的顏色 寬度， ... ，結(jié)尾處的顏色寬度*/
/*圓心位置默認為center，我們這里設(shè)置圓心為元素左頂點和右頂點*/
/*漸變的大小默認為farthest-corder ,我們這里設(shè)置的farthest-side*/
/*漸變的形狀默認為ellipse（橢圓），我們這里得設(shè)置成circle（圓形），但是寬高一樣的橢圓不就是圓形么，so...*/
/*顏色和寬度的設(shè)置，我們在離元素寬度還有1px的時候變化，所以這里是10-1=9px；*/
}
.item a:before{
content: "";
display: block;
position: absolute;
left: -9px;
bottom: 0;
width: 10px;
height: 10px;
background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
}
.item .active:after{
background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
}
.item .active:before{
background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
}
</style>
</head>
<body>
<div class="test">
<ul class="list clearfix">
<li class="item">
<a href="javascript:;" >新聞</a>
</li>
<li class="item">
<a href="javascript:;" class="active">娛樂</a>
</li>
<li class="item">
<a href="javascript:;">體育</a>
</li>
</ul>
<div class="content"></div>
</div>
</body>
</html>
View Code
?
桃心
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**{padding: 0;margin: 0;}*/
.wrapper{
margin: 100px;
width: 300px;
height: 300px;
border: 1px solid #0ff;
}
.test{
display:inline-block;
margin:50px;
height: 100px;
width: 100px;
background-color: red;
transform: rotate(-45deg);
}
.test::before , .test::after{
display:block;
content:"";
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
margin-top:-50%;
}
.test:after{
margin-left:50%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="test"></div>
</div>
</body>
</html>
View Code
?
回到頂部
<style>
*{padding: 0;margin: 0;}
.goTop{
position:fixed;
right:10px;
bottom: 10px;
height:50px;
width: 50px;
text-align:center;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.goTop:hover:before{
top:50%;
}
.goTop:hover .directTop{
visibility: hidden;
}
.goTop:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到頂部';
width: 40px;
color:peru;
font-weight:bold;
}
.directTop{
visibility: visible;
display:inline-block;
margin-top: 20px;
height:20px;
width: 20px;
border: 3px solid;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
</style>
<body style="height:2000px;">
<div class="goTop">
<div class="directTop"></div>
</div>
</body>
View Code
?
?
還有很多css制作的經(jīng)典圖形，以后再整理吧；
其實，css制作的圖標和圖片代替的圖片都很棒，根據(jù)需求吧。我更喜歡字體圖標和圖片的方式，效率更高，簡單。
?
來源：https://www./content-4-449851.html
|
