帶數字和陰影的字體真棒圓

如何使用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來製作一個圓形並將字體居中 –

只是爲了滿足我稍微修改從@邁克爾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有它正確。要使容器成爲一個圓形，固定的寬度和高度是必需的。既然你只是在尋找一個號碼，fontawesome與此無關。這裏有一個Flexbox的例子：

.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

帶數字和陰影的字體真棒圓

回答

相關問題