Font Awesomeアイコンを円形にしますか?


134

私はいくつかのプロジェクトで素晴らしいフォントを使用していますが、素晴らしいフォントアイコンで実行したいことがいくつかあります。次のように簡単にアイコンを呼び出すことができます。

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

すべてのアイコンを常に境界のある丸い円にすることは可能ですか?このようなもの、私は写真を持っています:

ここに画像の説明を入力してください

使用する

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

効果はありますが、問題はアイコンが常にテキストや要素の横よりも大きいことです。解決策はありますか?

回答:


175

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/


6
何かを手に入れましたが、丸い円ではありませんか?
シュナイダー、

border-radius要素を丸める必要があります。あなたはどんなブラウザを使いますか?接頭辞を付けて私の回答を更新します
ニコO

4
しかし、これは解決策ではありません。これは、iにコンテンツがある場合にのみ機能します。通常FAでは、iタグ内にコンテンツはありませんが、アイコンは後でCSSによってレンダリングされます<i class="fa fa-lock"></i>。これが@Schneiderが実際に要求したものです。
2014年

@Jan明日調査します。しかし、私は問題を見ることができません。そうです、タグにはコンテンツがありませんが、コンテンツはcssを介して追加されます。アイコンの読み込みに失敗した場合でも、円が表示されます。あなたは答えで見られる問題のjsFiddleを作ることができますか?
Nico O

4
いいえ。これが質問に対する答えです。質問の画像をご覧ください。ハードサークルではなく、影があります。
ニコO

230

Font Awesomeを使用すると、次のような積み重ねられたアイコンを簡単に使用できます。

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

Font Awesome Stacked Iconsを参照してください

更新:- 積み重ねられたアイコンのフィドル


6
積み重ねられたアイコンは2xまでしか機能しません。それよりも大きくしたい場合は機能しません
J Lee

15
これが受け入れられた答えであるならば、fontawesomeでこれを行う「正しい」方法です。受け入れられた答えは、うまく調整できないハックです。
Asked_io 2014年

4
数字も同じ<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-カスタムcssではなく、本当にfontawesomeである唯一のオプションです。そのため、ここでは何よりも正確です。
Asked_io 2016年

1
非常にエレガントなソリューション。@mmativ円の背景色を意味する場合は、<i class = "fa fa-circle-thin fa-stack-2x" style = "color:blue"> </ i>
J.Kirkを実行するだけです。

34

CSSやHTMLのトリックは必要ありません。Font Awesomeはそのための組み込みクラスを持ってい ます-fa-circle複数のアイコンを一緒にスタックするには、親divで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アイコンが円の中にあります:)


2
Sampat Badheは2年以上前に同じように彼の答えで語っています。自分の答えを書く前に、他の答えを読んでみませんか?
Taras Yaremkiv 2017

サンパットさん、申し訳ありません。彼の回答が見つかりませんでした。回答を変更して、解決策や役立つ情報を追加します。
Vasyl Gutnyk 2017

1
これは良い解決策ですが、各アイコンの背景が青色になります。回避策はありますか?
Jamshaid Kamran 2017

@CodeIt単にcssを使用してそれをクリアするか、新しい背景色を追加します。それは問題ではないはずです。
Vasyl Gutnyk 2017年

27

em基本測定として使用する円のフォントアイコン

あなたは含めて、測定のためにEMSを使用している場合line-heightfont-sizeおよびborder-radius、と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 */
}

13

更新:代わりに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;
}

楽しんで


text-alignを追加:中央; fa-infoでもほとんどすべてで機能します
Marcio

垂直方向の位置合わせはどうですか?
localhoost 2015年

9

これもできます。私のicomoonアイコンの周りにサークルを追加したいと思いました。これがコードです。

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

8

更新

最近flexを学習すると、よりクリーンな方法があります(テーブルがなく、CSSが少なくなります)。ラッパーをとして設定し、そのdisplay: flex;子を中央揃えにして、align-items: center;(垂直)およびjustify-content: center;(水平)中央揃えのプロパティを指定します。

この更新されたJS Fiddleを参照してください


これまで誰もこれを提案しなかった奇妙なことです。私はいつもこれを行うためにテーブルを使用します。
単純にラッパーを作成display: tabletext-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フィドルを見てください


これはとても素晴らしくてきれいで小さいものです!SCSS jsfiddle.net/bqtkmy0sの
summsel

@summselこれは私の元の答えとまったく同じではありませんか?あなたはcssではなくscssでコードを書いただけです。
nclsvh

はい、もちろんです。私はCSSであなたの解決策を試しましたが、CSSを好む人はたくさんいます。では、なぜこのcssバージョンのjsfiddleを投稿しないのか。
summsel

5

これは、使用する必要のない方法です。とをpadding設定し、でハンドルを使用します。heightwidthaflexmargin: 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>


4

以下の例は私にはうまくいきませんでした、これは私が作ったバージョンです!

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

3

これを試して

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

2

Font Awesomeアイコンは:beforeとして挿入されます。したがって、次のようにiまたは同様のスタイルを設定できます。

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

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

2

次のコードを使用して、単純に丸いアイコンを取得できます。

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

これで、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;}

0

私は«line-height»でのDave Everittの答えが好きですが、それは«height»を指定することによってのみ機能し、次に«!important»をline-heightに追加する必要があります...

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

行の高さは私のためにそれを解決していました
mecograph

追加!importantはバンドエイドであり、解決策ではありません。プロパティをオーバーライドする別の場所に別のCSSプロパティがあることを意味します。
TylerH

0

これは、私がこれまでに見つけた最良かつ最も正確なソリューションです。

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;
    }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.