浏览网络的时候看见某个站点的导航条菜单图标很有意思，导航条logo一般都是3条横杠，该站点的其中一条横杠是略短的，鼠标悬停时会动态伸长。尝试着自己利用css实现了类似的效果，考虑将其放入正在修改的wordpress主题当中，先记录一下实现的过程。
relative与absolute
absolute是个很好用的定位方式，它会让元素根据最接近的某个定位方式为relative的父元素确定自己的位置。比如有个方形的父元素，定位方式为relative，这个元素作为图标的容器，在容器当中我们用css画了个圆圈图标，我们希望圆圈位于方块的正中间，我们可以把圆圈定位为absolute，并调整top与left的值。此后无论这个方形被插入到文档的任何位置，该圆圈始终会处于方块的中间。
px与em
em单位体现的是一个比例关系，比如在某元素中设置了一个“font-size:20px”的属性，那么其自身以及子元素都可以用1em来代替20px，我们想设置某个子元素高度为4px的时候，可以利用em的方式改写为0.2em。之所以要用em来代替px，是因为当我们修改父元素中“font-size:20px”为40px的时候，如果子元素的高度为4px，那么子元素高度不变，如果是0.2em，那么子元素的高度会变为0.2*40px，即8px。实现了等比缩放的效果。想象一下，一个图标，被放大了两倍，它内部的线条总得跟着变宽一点吧。
老本行画机械图的，来利用cad的方式来看一下em的计算方式吧：
自己尝试的图标
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
}
[class^=icon-aug]{
display:block;
font-size:100px;
width:1em;
height:1em;
position:relative;
background:lightblue;
}
.icon-aug-arrow:before{
content:'';
display:block;
top:0.1491em;
left:0.2737em;
width: 0.3525em;
height: 0.3525em;
position:absolute;
border-top: 0.1em solid #333;
border-left: 0.1em solid #333;
transform: rotate(-135deg);
}
.icon-aug-navbar:before{
content:'';
display:block;
top:0.448em;
left:0.18em;
width: 0.40em;
height: 0.1em;
position:absolute;
background:#333;
}
.icon-aug-navbar:after{
content:'';
display:block;
top:0.24em;
left:0.18em;
width: 0.64em;
height: 0.32em;
position:absolute;
border-top: 0.1em solid #333;
border-bottom: 0.1em solid #333;
}
.icon-aug-search:before{
content:'';
display:block;
position:absolute;
top:0.18em;
left:0.18em;
width:0.34em;
height:0.34em;
border:0.1em solid #333;
border-radius:0.27em;
}
.icon-aug-search:after{
content:'';
display:block;
position:absolute;
top:0.592em;
left:0.667em;
width:0.1em;
height:0.25em;
background:#333;
border-radius:0.05em;
transform: rotate(-45deg);
}
.icon-aug-position:before{
content:'';
display:block;
position:absolute;
top:0.18em;
left:0.2349em;
width:0.24em;
height:0.24em;
border:0.1451em solid #333;
border-radius:0.2651em;
}
.icon-aug-position:after{
content:'';
display:block;
position:absolute;
top:0.4451em;
left:0.2349em;
background:#333;
width:0.2651em;
height:0.2651em;
border-radius:0 0.2651em 0 0;
tranform:100% 0 rotate(-45deg);
}
</style>
</head>
<body>
<i class="icon-aug-arrow"></i><br>
<i class="icon-aug-navbar"></i><br>
<i class="icon-aug-search"></i><br>
<i class="icon-aug-position"></i><br>
</body>
</html>要实现所有图标比例的修改，仅需要修改以下部分的font-size的值；
[class^=icon-aug]{
display:block;
font-size:100px;
width:1em;
height:1em;
position:relative;
background:lightblue;
}要实现单个修改图标尺寸，可以给单个图标的类名增加一个font-size属性。
.icon-aug-arrow{
font-size:20px;
}
icon-aug-navbar{
font-size:40px;
}
icon-aug-search{
font-size:60px;
}