自定義icons圖標庫

在實際項目中當Dorado 默認icons無法滿足圖標需求時用戶可通過自行引入第三方icons庫，進行更加豐富化icons。

在線定制圖標

• 阿里媽媽圖標庫-比較全
• Fontello

在Dorado中的配置（阿里媽媽圖標庫為例）

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

.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內容如下：

/* 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;
}

其他四個iconfont.svg、iconfont.eot、iconfont.ttf、iconfont.woff 移入當前目錄下的fonts子目錄下 并將資源文件Copy進項目資源目錄下（本例中的最終結構如下） 配置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按照目錄結構填寫相對路徑 -->
    /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添加自定義的圖標 ? ? ? 在Button的 iconClass屬性中填入：iconfont icon-jiaoyi ? ? ?注意：iconfont 也是必須填入的（具體的大家懂得，這里不解釋） ? ? ? 效果： iconfont-阿里巴巴矢量圖標庫iconfont-阿里巴巴矢量圖標庫iconfont-阿里巴巴矢量圖標庫