数字と影のついたフォントのような円

font awesomeを使用して、数字の入った円を作成し、の影であるを作成するにはどうすればよいですか？数値と境界線を持つ円で見つかった典型的な答えは、円の影ではなく正方形の影を作り出します（少なくとも私がそれをやろうとしているところでは）。数字と影のついたフォントのような円

影付きの円を作成するための解決策が見つかりましたが、＃のためには機能しません。それは円ではなく楕円形を作り出しています。

#blah { 
 
    box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46); 
 
} 
 

 
.icon-wrapper { 
 
    display: inline-block; 
 
} 
 

 
.page-number-core { 
 
    border: 3px solid #fff; 
 
    padding: 10px; 
 
    -webkit-border-radius: 1100%; 
 
    -moz-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
    border-radius: 100%; 
 
    box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46); 
 
    text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.fix-editor { 
 
    display: none; 
 
} 
 

 
.bold { 
 
    font-weight: bold; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class='bold'>Incorrect shadow</div> 
 
    </br> 
 
    <div> 
 
    <span class="fa-stack fa-3x"> 
 
     <i id='blah' class="fa fa-circle-o fa-stack-2x"></i> 
 
     <strong class="fa-stack-1x">1</strong> 
 
     </span> 
 
    </div> 
 
    </br> 
 
    <div class='bold'>Produces an Oval - Not a Circle</div> 
 
    </br> 
 
    <div class="icon-wrapper"> 
 
    <i class="fa page-number-core page-number-dark"> 
 
      <span class="page-number-text page-number-text-light">1</span> 
 
     </i> 
 
    </div> 
 
    <br/><br/> 
 
    <div class='bold'>Produces an Circle with Shadow but not for a #</div> 
 
    </br> 
 
    <div class="icon-wrapper"> 
 
    <i class="fa fa-comment page-number-core page-number-dark"> 
 
      <span class="page-number-text page-number-text-light fix-editor">&nbsp;</span> 
 
     </i> 
 
    </div> 
 
    </br> 
 
    <div> 
 
    <a href="http://codepen.io/Onomicon/pen/iDfld">Source of Circle with Shadow</a> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-04-05 spottedmahn

fontAwesomeを使用することは必須ですか？ – mayersdesign

正方形を始めるには、静的な幅と高さを設定する必要があります。 border-radius、text-align、line-heightを使用して円を作成し、フォントを中央揃えにします –

ちょうど私が少しそれがフォント-恐ろしいと連携させるために@Michael Arrisonからの回答を変更し、質問の正確な要件を満たすために。

ポイントは、フォント-恐ろしいCSSクラスfa-3xサイズを設定するためのemを使用していることである：

.fa-3x { 
    font-size: 3em; 
}

したがってheightとwidthの.circleクラスはまた、全体のことを行うことがemで指定する必要がありますさまざまなフォントサイズで作業します。

そしてfa-circle-oフォント-素晴らしいCSSクラスのサークルが利用できる高さと幅の100％を使用していないので、.circleクラスのサイズは5.1em代わりの6emです。

.circle { 
 
    display: flex; 
 
    border-radius: 50%; 
 
    width: 5.1em; 
 
    height: 5.1em; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46); 
 
    -moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46); 
 
    box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46); 
 
}

<div class="circle"> 
 
    <span class="fa-stack fa-3x"> 
 
    <i class="fa fa-circle-o fa-stack-2x"></i> 
 
    <strong class="fa-stack-1x">1</strong> 
 
    </span> 
 
</div>

ヒント：スタック用fa-lg代わりのfa-3xを使用する場合

、.circleクラスの正しいサイズは2.2emあります。

出典

2017-06-25 00:33:15 ltlBeBoy

GCyrillusは正しい、それを持っています。コンテナを円にするには、固定幅と高さが必要です。あなたは数字を探しているだけなので、フォントワームはこれとは何の関係もありません。ここでフレキシボックスの例です：

.circle { 
 
    display: flex; 
 
    border: 3px solid #fff; 
 
    border-radius: 50%; 
 
    width: 30px; 
 
    height: 30px; 
 
    justify-content: center; 
 
    align-items: center; 
 
    box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46); 
 
}

<div class='circle'> 
 
    <div>1</div> 
 
</div>

出典

2017-04-05 18:53:25

数字と影のついたフォントのような円

答えて

関連する問題