web-dev-qa-db-fra.com

Pouvons-nous ajouter une bordure autour de l'icône fontawesome en utilisant css?

Je dois modifier la largeur de la bordure de l'icône - fa-comment-o. Peut-on changer la taille de la largeur de la bordure avec css?

cssiconsborder
15
Anil Maharjan

Oui, vous pouvez. Utilisez une ombre de texte:

.my-icon {
     text-shadow: 0 0 3px #000;
}

Ou aussi vous pouvez utiliser webkit text stroke rappelez-vous que cela fonctionne uniquement avec Chrome et Safari

Exemple CSS-Tricks

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
34
Red

Depuis la version 5.0.6, Font Awesome utilise svgs et paths pour dessiner leurs icônes. Avec un peu d'aide de l'outil Inspecter un élément, voici comment appliquer des bordures aux chemins des icônes.

.fa-comment g g path {
  stroke: black;
  stroke-width: 10;
}
7
reiallenramos

Utilisez la propriété text-shadow comme suit:

.my-bordered-icon{
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
5
user2281668

Les frontières sont intégrées - au moins à partir de la v4.6.

"Utilisez fa-border et fa-pull-right ou fa-pull-left pour des guillemets faciles à tirer ou des icônes d'articles." 

    <i class="fa fa-camera-retro fa-border"></i> fa-lg

Le rembourrage, le style de bordure, la couleur, etc. peuvent être modifiés dans le fichier css font-awesome; recherche de fa-border.

http://fontawesome.io/examples/#animated

2
Matthew Dunn

Pour ce faire, empilez d'autres icônes sur l'icône fa-circle pour leur donner une forme circulaire. La couleur peut également être inversée à l'aide de la classe fa-inverse. Vous pouvez placer des icônes Font Awesome presque n'importe où à l'aide du préfixe CSS fa et du nom de l'icône. Font Awesome est conçu pour être utilisé avec des éléments en ligne (nous aimons la balise <i> pour la brièveté, mais utiliser un <span> est plus correct sémantiquement).

exemple et en apprendre davantage sur lui http://fontawesome.io/examples/

Pour augmenter la taille des icônes par rapport à leur conteneur, utilisez les classes fa-lg (augmentation de 33%), fa-2x, fa-3x, fa-4x ou fa-5x.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
1
Codeone

donnez simplement une classe à votre icône avec le style suivant.

.fa-border-icon {
    border-width: 3px;
    border-style: solid;
    border-color: orange;
    border-image: initial;
    border-radius: 50% 50% 50% 50%; 
    padding: 6% 9% 6% 9%; 
}

(utilisez des rembourrages et des rayons selon vos besoins)

0
Pritesh Thaker