私はいくつかのプロジェクトで厄介なフォントを使用していますが、私はフォント素晴らしいアイコンでやりたいことがいくつかあります、私は簡単にこのようなアイコンを呼び出すことができ
<i class="fa fa-lock"></i>
すべてのアイコンを常にボーダー付きの丸い円にすることはできますか。
を使う
i
{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
}
効果はありますが、問題はアイコンが常にそのtxtまたは要素より大きいことです。
Font Awesomeでは、このように積み上げアイコンを簡単に使用できます。
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
更新: - 積み上げアイコン用のFiddle
CSSやHTMLのトリックは必要ありません。 Font Awesomeはそのためのクラスを組み込みました - fa-stack
<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>
//そしてFacebookのアイコンが円の中に入りました:)
line-height
、font-size
およびborder-radius
を含む測定値にemsを使用する場合、text-align: center
を使用すると、状況がかなり安定します。
#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 */
}
更新:代わりにflexを使ってください。
精度が必要な場合は、これが有効な方法です。
いじる。 Go Play - > http://jsfiddle.net/atilkan/zxjcrhga/
これが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>
これが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;
}
楽しむ
これもできます。私は私のicomoonアイコンの周りに円を追加したいと思いました。これがコードです。
span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
これはpadding
を使用する必要がないアプローチです。単にheight
にwidth
とa
を設定し、flex
を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>
UPDATE:
最近flexを習得すると、よりきれいな方法があります(テーブルがなくCSSが少ない)。ラッパーをdisplay: flex;
に設定し、その子を中央揃えにするには、align-items: center;
for(vertical)およびjustify-content: center;
(horizontal)centeringを使用します。
これを見る 更新されたJS Fiddle
誰も前にこれを示唆していなかったのは不思議です。私はいつもこれをするためにテーブルを使います。
単純にラッパーにdisplay: table
を持たせ、水平方向にはtext-align: center
を、垂直方向にはvertical-align: middle
を中央に配置します。
<div class='wrapper'>
<i class='icon fa fa-bars'></i>
</div>
そしてこんな風に
.wrapper{
display: table;
i{
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
またはこれを見てください JSフィドル
これを試して
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;
}
以下の例は私にはうまくいきませんでした、これは私が仕事をしたバージョンです!
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;
}
Font Awesomeのアイコンが:の前に挿入されます。したがって、iまたはaのいずれかのようにスタイルを設定できます。
.i {
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
私はDave Everittの"line-height"の答えが好きですが、それは"height"を指定することによってのみ機能します、そしてそれから我々はline-heightに"!important"を追加する必要があります...
.cercle {
font-size: 2em;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em!important;
background: #666;
color: #fff;
border-radius: 2em;
}
このコードを使って丸いアイコンを得ることができます。
<a class="facebook-share-button social-icons" href="" target="_blank">
<i class="fab fa-facebook socialicons"></i>
今あなたのCSSは次のようになります。
.social-icons {
display: inline-block;border-radius: 60px;box-shadow: 0px 0px 2px #888;padding: 0.5em 0.6em;background: #0D47A1;font-size: 20px;
}.socialicons{color: white;}