利用纯粹的CSS3替代小图标---向右箭头

一、向右的箭头>  .

　 看到不少网站里面向右的箭头都是图片代替的，可是为了网站的性能，咱们通常的原则是可以避免使用图片的尽可能不用图片

　  

　　好比看下携程我的中心首页面，向右的箭头

　　其实现思路是这样的：定义一个正方形盒子，盒子边框定义1px的上边框和右边框，而后对盒子旋转45度便可。

      代码以下：

<i class="arrow"></i>

.arrow{
     display: inline-block;
     width: 7px;
     height: 7px;
     border: solid #999;
     border-width: 1px 1px 0 0;
     -webkit-transform:rotate(-45deg);
     transform:rotate(-45deg);
}

嘘...

咱们能不能直接使用符号“ > “这个呢。

来来来，看淘宝网 

 

审查元素以后发现它是这样实现的。

<i class="tb-icon service-arrow">➤</i>

 

.tb-icon{
    font-family: iconfont!important;
    font-size: 14px;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 

看到没，淘宝都这样作，咱们何不借鉴下呢。

不过它在添加字符的时候额外修饰了一番。使用字体抗锯齿属性:-webkit-font-smoothing

对字体进行抗锯齿渲染可使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也愈来愈多。

font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后因为某些缘由从web标准中被移除了。

可是，咱们能够用如下两种定义进行抗锯齿渲染

-webkit-font-smoothing: antialiased; /*chrome、safari*/

-moz-osx-font-smoothing: grayscale;/*firefox*/

 

（1）Webkit在本身的引擎中支持了这一效果。

　　-webkit-font-smoothing

　　它有三个属性值：

　　　　none ------ 对低像素的文本比较好

　　　　subpixel-antialiased------默认值

　　　　antialiased ------抗锯齿很好

　　　　例子：

body{
　　-webkit-font-smoothing: antialiased;
}

　　　　这个属性可使页面上的字体抗锯齿,使用后字体看起来会更清晰。加上以后就顿时感受页面小清晰了。

（2）Gecko也推出了本身的抗锯齿效果的非标定义。

　　　　-moz-osx-font-smoothing: inherit | grayscale;

　　　　这个属性也是更清晰的做用。

　　　　例子：

.icon {
　　-webkit-font-smoothing: antialiased;
　　-moz-osx-font-smoothing: grayscale;
}

 

（3）Ionic框架在样式中多加了一条font-smoothing: antialiased;

　　　　这是坐等font-smoothing标准化，有备无患么。

 

固然了还有一种方法了，使用Art-Reactor | 字体图标集 这里面有不少不少图标方便咱们使用，使用方法也比较简单，详细看看这个就知道了 

http://chinakids.github.io/Art-Reactor/   固然这个教程也不错 http://www.zcool.com.cn/article/ZMTc3NDg4.html

 

小应用：回到网站头部小图标

<div class="arr">
    <i class="arrow"></i>
</div>

 

.arr{
    width:70px;
    height:70px;
    line-height:100px;
    background:rgba(153,153,153,0.8);
    border-radius:50%;
    text-align:center;
}
.arr .arrow{
    display: inline-block;
    width:26px;
    height:26px;
    border: solid #fff;
    border-width: 4px 4px 0 0;
    -webkit-transform:rotate(-45deg);
     transform:rotate(-45deg);
}

 效果图为