Source : Support glyph and fa icon inside input.
Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :
Afin que l’icône s’affiche correctement, (il semble que) la structure HTML doivent obligatoirement comporter des <div class="row"><div class="classes-de-votre-grille placeholder-icon"> englobants :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="row"> <div class="twelve columns placeholder-icon"> <input type="text" id="<?php echo $this->getFieldId('company') ?>" name="<?php echo $this->getFieldName('company') ?>" value="<?php echo $this->escapeHtml($this->getObject()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="input-cartegie input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?> input-lg" <?php echo $this->getFieldParams() ?> placeholder="<?php echo $this->__('Company') ?>" /> <label for="<?php echo $this->getFieldId('company') ?>" class="fa fa-building-o" rel="tooltip" title="<?php echo $this->getStoreLabel('company') ?>"></label> </div> </div> |
La classe .icon-addon pouvant entrer en conflit avec d’autres styles affectés à des classes plus génériques de type icon-, j’ai préféré changer le libellé en .placeholder-icon.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.placeholder-icon { position: relative; display: block; } .placeholder-icon:after, .placeholder-icon:before { display: table; content: " "; } .placeholder-icon .glyphicon, .placeholder-icon .fa { position: absolute; z-index: 2; left: 10px; font-size: $baseFontSize + 4; width: 20px; text-align: center; padding: 10px 0; top: $baseFontSize + 4; color: $placeholderColor; } .placeholder-icon .input-text { padding-left: 28px; } |
Code HTML/CSS de la démo initiale :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="container"> <div class="row" style="margin-top: 5%"> <div class="col-md-5"> <div class="form-group"> <div class="icon-addon addon-md"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-md"> <select class="form-control"> <option>Select Option</option> <option>Sample</option> <option>Sample</option> </select> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="input-group input-group-md"> <span class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></span> <div class="icon-addon addon-md"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
.center-block { float: none; margin-left: auto; margin-right: auto; } .input-group .icon-addon .form-control { border-radius: 0; } .icon-addon { position: relative; color: #555; display: block; } .icon-addon:after, .icon-addon:before { display: table; content: " "; } .icon-addon:after { clear: both; } .icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa { position: absolute; z-index: 2; left: 10px; font-size: 14px; width: 20px; margin-left: -2.5px; text-align: center; padding: 10px 0; top: 1px } .icon-addon.addon-lg .form-control { line-height: 1.33; height: 46px; font-size: 18px; padding: 10px 16px 10px 40px; } .icon-addon.addon-sm .form-control { height: 30px; padding: 5px 10px 5px 28px; font-size: 12px; line-height: 1.5; } .icon-addon.addon-lg .fa, .icon-addon.addon-lg .glyphicon { font-size: 18px; margin-left: 0; left: 11px; top: 4px; } .icon-addon.addon-md .form-control, .icon-addon .form-control { padding-left: 30px; float: left; font-weight: normal; } .icon-addon.addon-sm .fa, .icon-addon.addon-sm .glyphicon { margin-left: 0; font-size: 12px; left: 5px; top: -1px } .icon-addon .form-control:focus + .glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus + .fa, .icon-addon:hover .fa { color: #2580db; } |