it-swarm.com.de

Kann man mit css einen Rahmen um das fontawesome-Symbol hinzufügen?

Ich muss die Rahmenbreite des Symbols ändern - fa-comment-o. Können wir die Randbreite mit css ändern?

15
Anil Maharjan

Ja, du kannst. Verwenden Sie einen Textschatten:

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

Oder Sie können webkit-Textstrich verwenden. Denken Sie daran, dass es nur mit Chrome und Safari funktioniert.

CSS-Tricks Beispiel

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

Seit Version 5.0.6 verwendet Font Awesome svgs und paths, um ihre Symbole zu zeichnen. Mit etwas Hilfe des Werkzeugs "Element prüfen" können Sie die Symbolpfade mit Rahmen versehen.

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

Verwenden Sie die Eigenschaft "Textschatten" wie folgt:

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

Grenzen sind eingebaut - zumindest ab v4.6.

"Verwenden Sie fa-border und fa-pull-right oder fa-pull-left, um einfache Zitate oder Artikelsymbole zu verwenden." 

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

In der font-awesome-CSS-Datei lassen sich Auffüllung, Rahmenstil, Farbe und mehr anpassen. suche nach fa-border.

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

2
Matthew Dunn

Sie können dies tun, indem Sie andere Symbole über das Symbol fa-circle stapeln, um sie kreisförmig zu gestalten. Die Farbe kann auch mit der Klasse fa-inverse..__ invertiert werden. Mit dem CSS-Präfix fa und dem Namen des Symbols können Sie beliebig viele Font Awesome-Symbole platzieren. Font Awesome wurde für die Verwendung mit Inline-Elementen entwickelt (wir mögen das <i>-Tag aus Gründen der Kürze, aber die Verwendung eines <span> ist semantisch korrekt).

beispiel und lernen mehr abbout it http://fontawesome.io/examples/

Um die Symbolgröße relativ zu ihrem Container zu erhöhen, verwenden Sie die Klassen fa-lg (33%), fa-2x, fa-3x, fa-4x oder 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

geben Sie Ihrem Symbol einfach eine Klasse mit folgendem Stil.

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

(Verwenden Sie Polster und Radius je nach Bedarf)

0
Pritesh Thaker

Es war mir nicht klar, wie ich es zum Laufen bringen sollte, deshalb habe ich diesen Test erstellt, sobald ich es zum Laufen gebracht habe. Um in Chrome) zu arbeiten, müssen Sie die SVG-Version von font awesome importieren ( https://use.fontawesome.com/releases/v5.8.1/js/all.js ).

Es funktioniert in chrome und firefox

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vw;
  background: #aaa;
}

.fa-times path {
  stroke: white;
  stroke-width: 30px;
}
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

<i class="fa fa-times" aria-hidden="true"></i>
0
Esteban