利用純粹的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);
}

 效果圖爲