自定義icons圖標(biāo)庫(kù)

在實(shí)際項(xiàng)目中當(dāng)Dorado 默認(rèn)icons無(wú)法滿足圖標(biāo)需求時(shí)用戶(hù)可通過(guò)自行引入第三方icons庫(kù)，進(jìn)行更加豐富化icons。

在線定制圖標(biāo)

• 阿里媽媽圖標(biāo)庫(kù)-比較全
• Fontello

在Dorado中的配置（阿里媽媽圖標(biāo)庫(kù)為例）

解壓文件 拆分iconfont文件 ? ? ?將iconfont文件拆分為iconfont.css和iconfont-face.css文件 ? ? ?iconfont.css內(nèi)容如下：

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.icon-jiaoyi:before {
    content: "\e76a";
}

? ?iconfont-face.css內(nèi)容如下：

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  font-weight: normal;
  font-style: normal;
}

其他四個(gè)iconfont.svg、iconfont.eot、iconfont.ttf、iconfont.woff 移入當(dāng)前目錄下的fonts子目錄下 并將資源文件Copy進(jìn)項(xiàng)目資源目錄下（本例中的最終結(jié)構(gòu)如下） 配置packages-config.xml 具體目錄為：${project-home}/web/WEB-INF/dorado-home/packages-config.xml 注意：

<Package name="iconfont-support" pattern="res-css"
    baseUri=">resources/icons/iconfont/fonts">
    <!-- baseUri按照目錄結(jié)構(gòu)填寫(xiě)相對(duì)路徑 -->
    /resources/icons/iconfont/iconfont-face
</Package>
<Package name="iconfont" pattern="res-css" depends="iconfont-support">
    /resources/icons/iconfont/iconfont
</Package>

恭喜您已成功配置資源文件！

如何使用

view的packages屬性中填入 package name （如下圖） ? 為Dorado Button添加自定義的圖標(biāo) ? ? ? 在Button的 iconClass屬性中填入：iconfont icon-jiaoyi ? ? ?注意：iconfont 也是必須填入的（具體的大家懂得，這里不解釋?zhuān)? ? ? ? 效果： iconfont-阿里巴巴矢量圖標(biāo)庫(kù)iconfont-阿里巴巴矢量圖標(biāo)庫(kù)iconfont-阿里巴巴矢量圖標(biāo)庫(kù)