easyUI的圖標(biāo)設(shè)置

? ? ? ? ? 為了頁(yè)面的美觀，經(jīng)常會(huì)用到各種各樣的圖標(biāo)，尤其是前臺(tái)使用easyUI的時(shí)候。

? ? ? ? ??但是，easyUI給提供的頁(yè)面圖標(biāo)icon，非常的少，官網(wǎng)最新版本為jquery-easyui-1.5.1，提供了圖標(biāo)只有31個(gè)，在themes\icons路徑下。

? ? ? ? ??添加圖標(biāo)文件的引用，直接使用就可以了。

? ? ? ? ??<linkhref="~/Content/EasyUI/themes/icon.css" rel="stylesheet"/>

? ? ? ? ??設(shè)置屬性，比如搜索按鈕的圖標(biāo)

? ? ? ? ??iconcls="icon-search"

? ? ? ? ??<a class="easyui-linkbutton"iconcls="icon-search" οnclick="doSearch();"style="font-size: larger; width: 120px; height: 30px; margin-left: 2px;margin-top: -2px">搜索</a>

? ? ? ? ??添加自己想要的圖標(biāo)

? ? ? ? ??首先，從網(wǎng)上下載16x16像素PNG格式網(wǎng)頁(yè)小圖標(biāo)。

? ? ? ? ??找到想要的圖標(biāo)樣式，選中直接粘貼在項(xiàng)目中，easyUI引用的icons文件夾中。

? ? ? ? ??在icon.css文件中，添加代碼，設(shè)置自己圖標(biāo)的路徑。

? ? ? ? ??.icon-圖標(biāo)的名稱{

???? ? ? ? ? ??background:url('icons/圖標(biāo)的名稱.png')no-repeat center center;

? ? ? ? ??}

? ? ? ? ??使用，直接設(shè)置屬性，使用自己的圖標(biāo)名稱即可（和自帶圖標(biāo)使用相同）。

?

總結(jié)

以上是生活随笔為你收集整理的easyUI的图标设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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