easyUI的圖標設置

? ? ? ? ? 為了頁面的美觀，經常會用到各種各樣的圖標，尤其是前臺使用easyUI的時候。

? ? ? ? ??但是，easyUI給提供的頁面圖標icon，非常的少，官網最新版本為jquery-easyui-1.5.1，提供了圖標只有31個，在themes\icons路徑下。

? ? ? ? ??添加圖標文件的引用，直接使用就可以了。

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

? ? ? ? ??設置屬性，比如搜索按鈕的圖標

? ? ? ? ??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>

? ? ? ? ??添加自己想要的圖標

? ? ? ? ??首先，從網上下載16x16像素PNG格式網頁小圖標。

? ? ? ? ??找到想要的圖標樣式，選中直接粘貼在項目中，easyUI引用的icons文件夾中。

? ? ? ? ??在icon.css文件中，添加代碼，設置自己圖標的路徑。

? ? ? ? ??.icon-圖標的名稱{

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

? ? ? ? ??}

? ? ? ? ??使用，直接設置屬性，使用自己的圖標名稱即可（和自帶圖標使用相同）。

?

總結

以上是生活随笔為你收集整理的easyUI的图标设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。