font awesome – devfrontend.info

Bibliothèques gratuites

Icofont – In a Single Font 2105 FREE ICONS
https://useiconic.com/open/
https://octicons.github.com/
https://github.com/danklammer/bytesize-icons
https://material.io/icons/
http://ionicons.com/
https://feathericons.com/
http://demo.amitjakhu.com/dripicons/
http://ikons.piotrkwiatkowski.co.uk/
http://glyph.smarticons.co/

Outils et techniques pour extraire des icônes d’une police

Requiert la source au format SVG.

font blast – Icon Fonts are cool – Font Awesome/Foundation/Fontello/etc all have great-looking and well thought out icons. font-blast can extract those cool icons from the font file, and create individual SVG/PNG files for every one of them. (depuis Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG par Sara SOUEIDAN).

Outils et techniques pour créer et/ou éditer une police d’icônes

icomoon.io
gulp-svgstore et gulp-iconfont
https://designer.gravit.io/ – un outil de type Adobe Illustrator en ligne (et gratuit)

Polices d’icônes déjà splitées en sources SVG

1 icône = 1 fichier. Pas forcément intéressant lorsqu’on sait utiliser font blast (voir plus haut).

Font Awesome icons as individual SVG files (plus à jour que le second repo git de cette liste)
Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator
(plugins NPM jamais testés) font-awesome-svg – Split Font Awesome icons into individual SVG files. ou font-awesome-svg-icons – This package contains a subset of Font Awesome icons except that they are in SVG form. The only modification to the icon itself is that not padding within the icon (top / bottom left / right) is not even (since it is not designed to be used as a font).

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 :

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

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

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.

.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;
}

.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 :

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

</div>

<option>Select Option</option>

<option>Sample</option>

</select>

</div>

</div>

</span>

</div>

.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;
}

.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;

}

Articles récents

Catégories

Archives

Méta

Étiquette : font awesome

[Polices d’icônes] Ressources en ligne, astuces, bonnes pratiques

Bibliothèques gratuites

Outils et techniques pour extraire des icônes d’une police

Outils et techniques pour créer et/ou éditer une police d’icônes

Polices d’icônes déjà splitées en sources SVG

[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Code HTML/CSS de la démo initiale :