JS组件系列之Bootstrap Icon图标选择组件(3)

<style type="text/css"> .glyphicon-test13 { background: url('/Content/images/icons/p13.png') no-repeat center center!important; height: 15px!important; width: 14px!important; } </style>

然后将"glyphicon-test13"放入到初始化source对应的数组的最后,看似大功告成。我们刷新下界面看看

JS组件系列之Bootstrap Icon图标选择组件

事与愿违,图标背景图无法正常显示。这是为什么呢?博主好奇心又来了,审核元素看看:

JS组件系列之Bootstrap Icon图标选择组件

原来这个组件生成的是i标签,它和上面的span是不同的,span可以作为容器,而只能作为一种斜体标签。所以此种尝试失败。但是博主不服气了,你说i标签不是容器没有实际的占位是吧,我们将i里面写入多个空格行不行呢?

JS组件系列之Bootstrap Icon图标选择组件

可以看到向i标签里面加入空格之后,确实可以让图片显示出来,貌似问题完美解决!但是,但是,别高兴太早了,选中的时候还是不行,因为选中的里面还是空的i标签。所以总的来说,这种方式可以作为一种参考思路,后面有时间看是否可以适当修改下源码实现这个功能,目前这阶段是不支持自定背景图片的!

2)使用css写的图标尝试,结果成功

既然自定义背景图片不行,那么如果我们自定icon呢,也就是如果我们都通过:before{content:""}这种方式来写的图标是否可以呢?答案是可以的。我们找到一个专门放icon的网站Icon下载,去里面下载icon包,引用到我们项目的页面中来。

JS组件系列之Bootstrap Icon图标选择组件


我们随便选两个"ion-android-archive"、"ion-android-arrow-back"放到初始化source对应的数组的最后。刷新界面

JS组件系列之Bootstrap Icon图标选择组件

选中之后


三、比较

以上就是两种icon图标选择组件的使用示例。对比一下,这种组件其实各有利弊。

1、从界面效果来看,第二种(jqueryfontIconPicker)要比第一种(Bootstrap icon picker)要好看,界面更炫,用户体验更好。这个没有争议。

2、从组件的轻量级上面来说,第一种是要比第二种更优的,很明显,第二种引用了那么多的css,肯定或多或少会导致组件的臃肿。

3、从使用是否方便的角度来看,第一种使用更加简单,更易扩展;第二种api 更加全面,可自定义的项比较多,使用灵活,但是自定义背景图片目前会有问题。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwwpp.html