Utworzyć ikony Font Awesome w kółku?

139

Używam niesamowitych czcionek w niektórych projektach, ale mam kilka rzeczy, które chcę zrobić z niesamowitymi ikonami czcionek, mogę łatwo nazwać taką ikonę:

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

Czy jest możliwe, aby wszystkie ikony były zawsze w okrągłym okręgu z obramowaniem? Coś takiego, mam obrazek:

wprowadź opis obrazu tutaj

Za pomocą

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

Czy da efekt, ale problem polega na tym, że ikony są zawsze większe niż tekst lub element obok, jakieś rozwiązania?

Schneider
źródło

Odpowiedzi:

181

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>


JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/

Nico O
źródło
6
Masz coś, ale nie okrągłe koło?
Schneider
border-radiusNależy zaokrąglić element. Jakiej przeglądarki używasz? zaktualizuję moją odpowiedź o przedrostki
Nico O
4
Ale to nie jest rozwiązanie. Działa to tylko wtedy, gdy ima treść. Zwykle z FA nie ma zawartości wewnątrz i-tagu, ale ikona jest później renderowana przez CSS: <i class="fa fa-lock"></i>io to właśnie prosił @Schneider.
stycznia
@Jan Jutro zbadam to. Ale nie widzę problemu. Masz rację, że tagi nie mają treści, ale treść zostanie dodana przez css. Nawet jeśli ikona się nie załaduje, zobaczysz kółko. Czy możesz zrobić jsFiddle problemu, który widzisz z odpowiedzią?
Nico O
4
Nie. To jest odpowiedź na pytanie. Zobacz zdjęcia pytania. Jest cień, a nie twardy okrąg.
Nico O
233

Dzięki Font Awesome możesz łatwo używać zestawionych ikon, takich jak:

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

patrz Font Awesome Stacked Icons

Aktualizacja: - Skrzypce dla ułożonych ikon

Sampat Badhe
źródło
6
Skumulowane ikony działają tylko do 2x. Jeśli chcesz czegoś większego, to nie działa
J Lee,
15
Chciałbym, żeby to była akceptowana odpowiedź, to „poprawny” sposób, aby to zrobić z fontawesome. Zaakceptowaną odpowiedzią jest hack, który nie dostosowuje się dobrze.
ask_io
4
To samo z liczbami<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>
m3nda
2
@emrah - to jedyna opcja, która jest naprawdę niesamowita, a nie niestandardowa css, więc jest bardziej precyzyjna niż cokolwiek tutaj.
ask_io
1
Bardzo eleganckie rozwiązanie. @mmativ jeśli masz na myśli kolor tła w okręgu, po prostu wykonaj <i class = "fa fa-circle-thin fa-stack-2x" style = "color: blue"> </i>
J.Kirk.
37

Nie potrzebujesz do tego sztuczek css ani html. Font Awesome ma wbudowaną klasę - fa-circle Aby ułożyć wiele ikon razem, możesz użyć klasy fa-stack w nadrzędnym div

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

// I mamy teraz ikonę facebooka w kółku :)

Wasyl Gutnyk
źródło
2
Sampat Badhe powiedział w swojej odpowiedzi to samo ponad 2 lata temu. Dlaczego nie przeczytasz innych odpowiedzi przed napisaniem swojej?
Taras Yaremkiv
hej, przepraszam za Sampata, nie widziałem jego odpowiedzi, spróbuję zmodyfikować moją odpowiedź i dodać więcej rozwiązań lub pomocnych informacji.
Wasyl Gutnyk
1
To dobre rozwiązanie, ale nadaje każdej ikonie niebieskie tło. Jakieś obejście?
Jamshaid Kamran
@CodeIt Po prostu użyj css, aby go wyczyścić lub dodać nowy kolor tła. To nie powinno być problemem.
Vasyl Gutnyk
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
30

Ikona czcionki w okręgu emjako podstawa pomiaru

jeśli używasz ems do pomiarów, w tym line-height, font-sizea border-radiusdzięki text-align: centertemu rzeczy są całkiem solidne:

#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 */
}
Dave Everitt
źródło
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
13

Aktualizacja: Raczej używaj flex.

Jeśli chcesz precyzji, to jest droga.

Skrzypce. Idź grać -> http://jsfiddle.net/atilkan/zxjcrhga/

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

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

Baw się dobrze

localhoost
źródło
dodawanie wyrównania tekstu: do środka; Sprawia, że ​​działa z prawie wszystkim, nawet fa-info
Marcio
co powiesz na wyrównywanie w pionie?
localhoost
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
9

Ty też możesz to zrobić. Chciałem dodać okrąg wokół moich ikon icomoon. Oto kod.

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
Ian Blair
źródło
8

AKTUALIZACJA :

Niedawno nauczyłem się fleksa, ale jest bardziej przejrzysty sposób (brak tabel i mniej CSS). Ustaw opakowanie jako display: flex;i aby wyśrodkować jego dzieci, nadaj mu właściwości wyśrodkowania align-items: center;(w pionie) i justify-content: center;(w poziomie).

Zobacz to zaktualizowane JS Fiddle


Dziwne, że nikt wcześniej tego nie zasugerował… Zawsze używam do tego tabel.
Po prostu ułóż owijkę display: tablei wyśrodkuj ją w środku w text-align: centercelu vertical-align: middlewyrównania poziomego i pionowego.

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

i trochę takich sassów

.wrapper{
  display: table; 

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

}

lub zobacz to JS Fiddle

nclsvh
źródło
To bardzo ładny, czysty i mały! Heres a fiddle with CSS zamiast SCSS jsfiddle.net/bqtkmy0s
summsel
@summsel czy to nie jest dokładnie to samo, co moja oryginalna odpowiedź? Właśnie napisałeś kod w scss, a nie w css.
nclsvh
tak, oczywiście, że tak. Wypróbowałem twoje rozwiązanie w css i jest wiele osób preferujących css. Dlaczego więc nie opublikować pliku jsfiddle tej wersji css.
Summsel
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
6

Jest to podejście, którego nie musisz używać padding, po prostu ustaw heighti widthdla ai pozwól flexuchwytowi 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>

mmativ
źródło
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
4

Poniższy przykład nie zadziałał dla mnie, to jest wersja, którą wykonałem!

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;
}
Petros Kyriakou
źródło
3

Spróbuj tego

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;
}
MaxineHu
źródło
2

Ikony Font Awesome są wstawiane jako: before. Dlatego można projektować zarówno swoją I lub tak:

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

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
TSlegaitis
źródło
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
2

Możesz po prostu uzyskać okrągłą ikonę za pomocą tego kodu:

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

Teraz twój CSS będzie:

.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;}
newbdeveloper
źródło
Czy mógłbyś się temu przyjrzeć? stackoverflow.com/questions/64270359/…
Jnl
0

Podoba mi się odpowiedź Dave'a Everitta z „wysokością linii”, ale działa ona tylko po określeniu „wysokości”, a następnie musimy dodać „! Ważne” do wysokości wiersza ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}
Oznog
źródło
Wysokość linii rozwiązała to dla mnie
mekograf
Dodawanie !importantjest opatrunkiem, a nie rozwiązaniem. Oznacza to, że masz inną właściwość CSS w innym miejscu, nadpisującą twoją właściwość.
TylerH
0

To najlepsze i najbardziej precyzyjne rozwiązanie, jakie do tej pory znalazłem.

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;
    }
Armando Guarino
źródło