web-dev-qa-db-ja.com

円のフォント素晴らしいアイコンを作る？

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

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

すべてのアイコンを常にボーダー付きの丸い円にすることはできますか。

enter image description here

を使う

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

効果はありますが、問題はアイコンが常にそのtxtまたは要素より大きいことです。

cssfont-awesome
111
Schneider

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

205
Sampat Badhe

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のアイコンが円の中に入りました:)

28
Vasyl Gutnyk

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 */
}
24
Dave Everitt

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

楽しむ

11
atilkan

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

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

これは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>
4
mmativ

UPDATE：

最近flexを習得すると、よりきれいな方法があります（テーブルがなくCSSが少ない）。ラッパーをdisplay: flex;に設定し、その子を中央揃えにするには、align-items: center; for（vertical）およびjustify-content: center;（horizo​​ntal）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フィドル

4
nclsvh

これを試して

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
MaxineHu

以下の例は私にはうまくいきませんでした、これは私が仕事をしたバージョンです！

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;
}
2
Petros Kyriakou

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

私は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;
}
0
Oznog

このコードを使って丸いアイコンを得ることができます。

<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;}
0
Raghvendra Pathak