Font Awesome Symbole in einem Kreis machen?

Ich verwende Font Awesome in einem Projekt, aber ich habe einige Dinge, die ich mit Font Awesome-Symbolen tun möchte. Ich kann ein Symbol wie dieses einfach aufrufen:

<i class="fa fa-lock"></i>

Ist es möglich, dass sich alle Symbole immer in einem runden Kreis mit Rand befinden? So etwas habe ich ein Bild:

Verwenden von

i {
  background-color: white;
  border-radius: 50%;
  border: 1x solid grey;
  padding: 10px;
}

Wird der Effekt, aber das Problem ist, dass die Symbole immer größer sind als der Text oder das Element daneben, irgendwelche Lösungen?

Mit Font Awesome können Sie ganz einfach gestapelte Symbole wie folgt verwenden:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

Siehe Font Awesome Stacked Icons

Update: - Geige für gestapelte Symbole

Sie brauchen keine CSS- oder HTML-Tricks dafür. Font Awesome hat eine Klasse dafür eingebaut - fa-circle Um mehrere Symbole zusammen zu stapeln, können Sie die fa-stack-Klasse für das übergeordnete div verwenden

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

// Und wir haben jetzt das Facebook-Symbol im Kreis :)

Schriftsymbol in einem Kreis mit em als Basismessung

wenn Sie ems für die Messungen verwendet werden , einschließlich line-height, font-sizeund border-radiusmit text-align: centerihm die Dinge ziemlich solide macht:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Update: Verwenden Sie lieber Flex.

Wenn Sie Präzision wünschen, ist dies der richtige Weg.

Geige. Go Play -> http://jsfiddle.net/atilkan/zxjcrhga/

Hier ist der HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Hier ist das CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

Habe Spaß

Sie können dies auch tun. Ich wollte einen Kreis um meine icomoon-Symbole hinzufügen. Hier ist der Code.

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

AKTUALISIEREN :

Nachdem Sie kürzlich Flex gelernt haben, gibt es einen saubereren Weg (keine Tabellen und weniger CSS). Stellen Sie den Wrapper so ein, dass die untergeordneten Elemente zentriert werden, display: flex;und geben Sie ihm die Eigenschaften align-items: center;für (vertikal) undjustify-content: center; zentriert werden, (horizontale) Zentrierung.

Siehe diese aktualisierte JS Fiddle

Seltsam, dass das vorher noch niemand vorgeschlagen hat. Ich benutze immer Tabellen, um das zu tun.
Machen Sie einfach einen Wrapper display: tableund zentrieren Sie ihn text-align: centerfür die horizontale und vertical-align: middlevertikale Ausrichtung.

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

und so etwas

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

oder sehen Sie diese JS Fiddle

Dies ist der Ansatz, den Sie nicht verwenden müssen. Stellen Sie paddingeinfach das heightund widthfür das ein aund lassen Sie den flexGriff mit margin: 0 auto.

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Das folgende Beispiel hat bei mir nicht ganz funktioniert, dies ist die Version, die ich zum Laufen gebracht habe!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

CSS:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

Versuche dies

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Schriftart Fantastische Symbole werden wie folgt eingefügt: Daher können Sie entweder Ihr i oder ein ähnliches stylen:

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Mit diesem Code können Sie einfach ein rundes Symbol erhalten:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

Jetzt lautet Ihr CSS:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

Ich mag Dave Everitts Antwort mit der «Zeilenhöhe», aber es funktioniert nur durch Angabe der «Höhe» und dann müssen wir «! Wichtig» zur Zeilenhöhe hinzufügen ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Dies ist die beste und präziseste Lösung, die ich bisher gefunden habe.

CSS:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }