構(gòu)建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后臺管理系統(tǒng)（52）-美化EasyUI皮膚和圖標(biāo)

系列目錄

? ? 我很久以前就想更新系統(tǒng)的皮膚功能，Easyui 自帶的皮膚已經(jīng)無法滿足客戶的審美。

? ??

? ? 皮膚顏色來源于AdminLTE系統(tǒng)。我的顏色全部都這里取的。，所以一共取了11個顏色。1個皮膚=2個banner顏色和1個側(cè)邊欄顏色

? ? 利用chome的元素查看器可以獲取AdminLTE顏色，或者用VS2013自帶的吸色器（我是用后者）

? ? 我是怎么做的？？？

? ? 我用了原EasyUI 的Gray作為基礎(chǔ)皮膚。里面只有這套皮膚我覺得最適合作為基礎(chǔ)皮膚

? ??

? ? 圖中為文件結(jié)構(gòu)，skin開頭為自己的皮膚。

? ? 皮膚里面一定要覆蓋基礎(chǔ)皮膚的樣式。

? ? 基礎(chǔ)皮膚的樣式主要來源于panel-body title ?window ?tree。一個一個寫，我大約覆蓋了70個class就可以完成。幾kb的東東，100行代碼

就可以。下面這個重要，圖標(biāo)哪里來。圖標(biāo)庫我引用的是 Font Awesome；這個不是指圖片庫，而是一個字體庫

? ? 圖標(biāo)585不夠用可以自己定義圖標(biāo)（http://font.baidu.com/editor/） 先導(dǎo)入，然后編輯后導(dǎo)出。或者刪除一些無用的來減少帶寬

? ? 但是我覺得585夠用了，目前最新版好像是4.5又多了很多圖標(biāo)。

? ? 編輯圖標(biāo)后最后導(dǎo)處woff

? ? 不知道Font Awesome?點(diǎn)我進(jìn)入了解

? ?9個牛B的特性，滿足日常需求。只要引入一個CSS文件就可以font-awesome.min.css

--------------------------

上面都是廢話：

? ? 1.怎么改變我的圖標(biāo)。

? ? 只要加更改為fa fa-adjust就會直接顯示上面第一個圖標(biāo)

? ? 以前的工具欄：是icon-search，現(xiàn)在是 fa fa-search。基本無縫接入

2.Easyui 的Tree如果改變

? ? easyui的Tree默認(rèn)是有圖標(biāo)的，為了符合皮膚，tree的默認(rèn)樣式我的這樣改變的

? ? 這是圖標(biāo)組，直接替換原代碼里面的tree-folder tree-folder-open分別對應(yīng) fa fa-folder和 fa fa-folder-open

? ? 替換大約十幾處按ctrl+h替換

? ? 效果如下

? ? 其實(shí)改變一個EASYUI 的皮膚并非難事，我只是做了一套red的皮膚，其他全部復(fù)制，成批替換2個顏色。

? ? 可以下載17講源碼試下感受下視角的改變，或者直接更改你的項(xiàng)目

? ??17講源碼下載?? 訪問密碼 15d3

總結(jié)

以上是生活随笔為你收集整理的构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统（52）-美化EasyUI皮肤和图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。