EasyUI Icon

一、概述

EasyUI是一個基於jQuery的UI組件庫，由於它的簡單易用和豐富的插件，成為了廣為使用的前端UI框架之一。而EasyUI Icon就是其中的一個插件。

二、EasyUI Icon的基本用法

EasyUI Icon是一組預定義的圖標集，可以通過在HTML中設置標籤和對應的class樣式來使用。例如：

    <i class="icon-add"></i>

其中，class為“icon-add”表示使用EasyUI Icon預定義圖標集中的一個叫做add的圖標。

三、EasyUI Icon的支持圖標

EasyUI Icon支持多種常見的圖標，下面列出部分常見圖標：

• icon-add：加號
• icon-remove：減號
• icon-edit：編輯
• icon-save：保存
• icon-help：幫助
• icon-ok：確認
• icon-cancel：取消
• icon-reload：重新加載
• icon-search：搜索
• icon-print：打印

四、EasyUI Icon的顏色與大小

EasyUI Icon可以進行顏色和大小的定製。通過設置對應的CSS樣式，可以實現不同顏色和不同大小的圖標。

例如，設置顏色為紅色：

    .red{color:red;}

    <i class="icon-add red"></i>

設置大小為20px*20px：

    .size{width:20px;height:20px;}

    <i class="icon-add size"></i>

五、EasyUI Icon的自定義圖標

除了使用EasyUI Icon預定義圖標集，還可以通過CSS樣式來自定義圖標。首先需要定義圖標的字體以及對應的CSS樣式，例如：

    @font-face{
        font-family:'myicon';
        src:url('../fonts/myicon.eot');
        src:url('../fonts/myicon.eot?#iefix') format('embedded-opentype'),
            url('../fonts/myicon.woff') format('woff'),
            url('../fonts/myicon.ttf') format('truetype'),
            url('../fonts/myicon.svg#myicon') format('svg');
        font-weight:normal;
        font-style:normal;
    }

    .icon-myicon{
        font-family:'myicon';
    }

    .myicon-a:before{
        content:"\e000";
    }

    .myicon-b:before{
        content:"\e001";
    }

    .myicon-c:before{
        content:"\e002";
    }

其中，@font-face定義了字體源文件的路徑和字體名稱，.icon-myicon定義了字體，分別對應了三個自定義圖標myicon-a、myicon-b、myicon-c。其中content屬性為字體映射的Unicode碼。

接着，在HTML中使用自定義圖標：

    <i class="icon-myicon myicon-a"></i>
    <i class="icon-myicon myicon-b"></i>
    <i class="icon-myicon myicon-c"></i>

六、結語

通過以上幾個方面的內容，我們可以清晰地了解EasyUI Icon的基本用法、支持圖標、顏色和大小以及自定義圖標等相關知識。

以上僅是EasyUI Icon的一些用法，EasyUI還有許多其他組件和插件，讀者可以結合文檔和實踐來深入了解。