[转]Add Bootstrap Glyphicon to Input Box
本文转自:http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box
How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
576down voteaccepted
|
Without Bootstrap:We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon. So for the following HTML:
You can use the following CSS to left and right align glyphs:
Demo in Plunker
With Bootstrap:As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the The simplest example would be something like this:
Pros:
Cons:
To overcome the cons, I put together this pull-request with changes to support left aligned icons. As it is a relatively large change, it has been put off until a future release, but if you need these features today, here's a simple implementation guide: If you're using less, just include these changes in your project. If you're not using less, grab the file and convert it to CSS with any online LESS Compiler. Then, all you have to do is include the class Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo. Here's a demo in Plunker
Didn't find what you were looking for? Try these similar questions: |
最新文章
- Block使用
- eclipse查看class文件的源码
- Javascript将构造函数扩展为简单工厂
- .Net分布式异常报警系统-客户端及服务端API
- 一头扎进EasyUI
- C++ struct 定义及初始化
- NTP 服务器配置
- WebSphere应用服务器中https 请求协议的相关注意事项(服务器使用代理上Internet)
- ExifInterface 多媒体文件附加信息
- Linux系统采用netstat命令查看DDOS攻击的方法
- JavaScript中Null和undefind区别
- SpringCloud学习笔记(3)——Hystrix
- .32-浅析webpack源码之doResolve事件流(4)
- 大受喜欢安卓触控一体机连接云端数据化管理提供例程DEMO
- linux中centros6.7安装php5.6,httpd-2.2.19(web产品化)遇到的问题总结
- windos64位下python3.6安装pywin32的问题
- Word 测试下发布博客
- Spring中Bean及@Bean的理解
- 链表的创建(C语言实现)
- iOS10原生的语音转文字功能
热门文章
- 跑monkey前开启/关闭系统通知栏
- PHP初步:在Mac OS X Yosemite下搭建Apache+PHP+Mysql
- 51nod1847 奇怪的数学题 (Min_25筛+第二类斯特林数)
- [bzoj4445] [SCOI2015]小凸想跑步 (半平面交)
- __getitem__
- CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法
- 编程开发之--Oracle数据库--存储过程使用动态参数绑定(3)
- Linux的vim和vi编辑器
- 微信智能机器人助手,基于hook技术,自动聊天机器人
- 搭建自己的pypi私有源服务器