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:
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?
css
font-awesome
Schneider
źródło
źródło
border-radius
Należy zaokrąglić element. Jakiej przeglądarki używasz? zaktualizuję moją odpowiedź o przedrostkii
ma 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.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
źródło
<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>
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 :)
źródło
Ikona czcionki w okręgu
em
jako podstawa pomiarujeśli używasz ems do pomiarów, w tym
line-height
,font-size
aborder-radius
dziękitext-align: center
temu 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 */ }
źródło
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
źródło
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; }
źródło
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środkowaniaalign-items: center;
(w pionie) ijustify-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: table
i wyśrodkuj ją w środku wtext-align: center
celuvertical-align: middle
wyró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
źródło
Jest to podejście, którego nie musisz używać
padding
, po prostu ustawheight
iwidth
dlaa
i pozwólflex
uchwytowimargin: 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>
źródło
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; }
źródło
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; }
źródło
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>
źródło
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;}
źródło
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; }
źródło
!important
jest opatrunkiem, a nie rozwiązaniem. Oznacza to, że masz inną właściwość CSS w innym miejscu, nadpisującą twoją właściwość.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; }
źródło