easyUI添加自定义图标
easyUI添加自定义图标
创维_yang 发表于8个月前
easyUI添加自定义图标
  • 发表于 8个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

    相信很多的程序员都或多或少的用过easyUI 这一前端框架,它给予了开发者很便捷的界面开发。而在界面开发中,图标的使用自不在少,在easyUI 这一框架中,我们可以通过 这样的书写方式来为某个元素添加图标。

    然而,easyUI 所提供的图标库有一定的限制,笔者在试图使用 “主页” 这样的图标时,发现它并不提供该图标。后来笔者通过查看 easyUI 的源码的方式,解决了该问题。那么需要怎样添加自定义的图标呢?方法如下:

    首先是图标的获取,笔者推荐上 “阿里巴巴矢量图标库” 来进行图标的获取。获取到图标之后,比如这样一个 “主页” 图标,将它重命名,好比命名为 “home.png”。

    然后打开 easyUI 封装的文件包,找到 “themes” 这样一个文件夹,将 “home.png” 文件放入 “themes” 目录下的 “icons” 文件夹中。

    解决图标文件问题后,还需要增加代码。在 “themes” 目录下有一个 “icon.css” 文件,打开该文件,我们发现它的书写方式形如:

.icon-blank{
    background:url('icons/blank.gif') no-repeat center center;
}

我们可以这样增加代码来获取 “home.png” 图标文件:

    .icon-home{
    background:url('icons/home.png') no-repeat center center;
}

至此问题解决,在页面引用中,我们通过  data-options="iconCls:'icon-home'"  这样的写法就可以加载该图标了。效果如图

共有 人打赏支持
粉丝 2
博文 11
码字总数 3345
×
创维_yang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: