IconFont 阿里圖標(biāo)庫(kù)

使用圖標(biāo)可以可以為頁(yè)面增色，用字體圖標(biāo)替代圖形圖標(biāo)可以簡(jiǎn)化開(kāi)發(fā)，避免圖片與文字的對(duì)齊問(wèn)題，提高用戶體驗(yàn)。IconFont資源豐富，品質(zhì)較高，支持通過(guò)font-class，Systrm等方式使用圖標(biāo)，且提供了項(xiàng)目管理功能，創(chuàng)建項(xiàng)目后，挑選圖標(biāo)并加入項(xiàng)目，即可生成不同調(diào)用方式的CDN靜態(tài)資源。

/*
代碼片段：在項(xiàng)目中用使用Symbol引用IconFont圖標(biāo)表示會(huì)員等級(jí)(已簡(jiǎn)化) 
使用Symbol引用方式是因?yàn)槠涫褂梅奖闱抑С侄嗌珗D標(biāo)
詳見(jiàn)http://www.iconfont.cn/plus/help/detail?helptype=code
*/
//引入由IconFont生成的通過(guò)Symbol引用使用圖標(biāo)所需的的js(CDN地址)
<script src="http://at.alicdn.com/t/font_y51rubtj57mn29.js"></script>
//加入通用css代碼（引入一次就行）
<style type="text/css">
    .iconfont-svg {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
//調(diào)用函數(shù)獲取用戶會(huì)員等級(jí)圖標(biāo)，并顯示
<em style='font-size: 22px;'>".tt_get_member_icon($this->_userId)."</em>
//函數(shù)部分 返回用戶等級(jí)圖標(biāo)
function tt_get_member_icon($user_id)
{
    $member = new Member($user_id);
/*
通過(guò)symbol引用IconFont圖標(biāo)
class屬性對(duì)應(yīng)上方定義的通用css中的類名
xlink:href屬性對(duì)應(yīng)IconFont的圖標(biāo)類名
*/
    if ($member->is_vip_type_3()) {
        return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-huangjinhuiyuan\"></use>
</svg>";
    }
    else if ($member->is_vip_type_2()) {
        return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-baiyinhuiyuan\"></use>
</svg>";
    }
    else if ($member->is_vip_type_1()) {
        return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-qingtonghuiyuan\"></use>
</svg>";
    }

    return "<svg class=\"iconfont-svg\" aria-hidden=\"true\">
    <use xlink:href=\"#icon-putonghuiyuanicon\"></use>
</svg></i>";
}

效果圖

IconFont **我的項(xiàng)目**

Staticfile CDN

由七牛云提供支持的靜態(tài)資源庫(kù)，收錄的常用的js,css等靜態(tài)資源庫(kù)，在項(xiàng)目中使用可以簡(jiǎn)化開(kāi)發(fā)(尤其是在庫(kù)依賴較多時(shí))，并有加快頁(yè)面加載速度的作用。

/*
代碼片段：  通過(guò)Staticfile CDN為項(xiàng)目引入vedio.js
若不使用靜態(tài)資源庫(kù)，則需要下載完整的js，css，兼容各瀏覽器內(nèi)核的字體文件等
*/
<link  rel="stylesheet" type="text/css" >
<script src="https://cdn.staticfile.org/video.js/6.0.1/video.min.js"></script>

Restlet Client -DHC

Chrome瀏覽器插件，可以方便的對(duì)http接口進(jìn)行測(cè)試，在進(jìn)行Ajax，Restful開(kāi)發(fā)時(shí)非常有幫助。
//若無(wú)法翻墻，請(qǐng)自行搜索下載。

項(xiàng)目使用實(shí)圖

Flat UI Colors

網(wǎng)站配色在很大程度上影響了網(wǎng)站的美觀，F(xiàn)lat UI Colors列出了了扁平化設(shè)計(jì)中最受歡迎的色彩，可以吸取復(fù)制任何你看中的色彩。

網(wǎng)站截圖

待續(xù)