邊界半徑不是字體真棒爲FA-棧工作

我添加fontawesome圖標與方形這個工作對我來說：邊界半徑不是字體真棒爲FA-棧工作

HTML：

<ul class="list-inline"> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-facebook"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-facebook fa-stack-1x"></i> 
     </span> 
     </a></li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-twitter"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-twitter fa-stack-1x"></i> 
     </span> 
    </a></li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-gplus"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-plus fa-stack-1x"></i> 
     </span> 
     </a></li> 
</ul>

CSS：

.fa-stack-1x { 
    color:white; 
    border-radius:0; 
} 
.fa-square{ 
    border-radius:0; 
} 
.icon-facebook { 
    color:#3b5998; 
} 

.icon-twitter { 
    color:#00aced; 
} 

.icon-gplus{ 
    color:#dd4b39; 
} 

body { 
    background-color: black; 
}

我需要顯示廣場沒有邊界半徑，我加border-radius:0;類.fa-square但字體真棒不工作沒有邊界半徑。

我該如何解決這個問題？

DEMO JSFIDDLE

來源

2015-06-05 Perspolis

他們在JSFiddle中看起來很好。你究竟想要做什麼？ – Mark

在行動中，我在正方形中看到邊界半徑。我需要從廣場上移除邊界半徑。 – Perspolis

該評論尚不清楚，請您重新解釋一下嗎？ –

我看着字體awesome.min.css，發現這一行：fa-square:before{content:"\f0c8"}我相信這意味着你正在使用\f0c8繪製正方形。這意味着它是一個真棒字體的字符，你不能通過border-radius來改變它。
您可以在 http://www.utf8icons.com/character/61640/UTF-8-character

來源

2015-06-05 17:56:00 Saki

發方瞭解這個圖標：前{內容：「\ f0c8」}將會導致一個問題。您可以通過刪除該類來修復它。然後覆蓋每個fa-stack-1x圖標的邊界半徑。

enter image description here

<ul class="list-inline"> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-facebook"> 
      <i class="fa fa-facebook fa-stack-1x"></i> 
     </span> 
     </a> 
    </li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-twitter"> 
      <i class="fa fa-twitter fa-stack-1x"></i> 
     </span> 
    </a> 
    </li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-gplus"> 
      <i class="fa fa-plus fa-stack-1x"></i> 
     </span> 
     </a> 
    </li> 
</ul>

CSS：

body { 
    background-color: black; 
} 
.fa-stack-1x { 
    -webkit-border-radius: 18px; 
    -moz-border-radius: 18px; 
    border-radius: 18px; 
    color:white; 
} 
.icon-facebook>.fa-stack-1x { 
    background-color:#3b5998; 
} 
.icon-twitter>.fa-stack-1x { 
    background-color:#00aced; 
} 
.icon-gplus>.fa-stack-1x { 
    background-color:#dd4b39; 
}

對於廣場只是改變邊界半徑的爲0px;在上面的CSS

來源

2015-06-05 18:18:28

正如其他人提到的那樣，圖標背後的「方塊」實際上是一個應用於.fa-square的字體圖標：在css之前。

不幸的是，此時設置的Font Awesome不包含真正的正方形。

然而，他們的確有一個圖標，在他們的設置中有一個更加硬的角落叫做「停止」圖標（在視頻播放器圖標組中）。你可以用這個替換你的css中的「square」來獲得更好的方塊。這確實讓非常輕微的半徑轉彎，但在小尺寸的它幾乎沒有noticable：

.fa-square:before { 
    content: "\f04d"; 
}

「\ F04D」是在字體真棒停止圖標的CSS內容價值。

表CSS含量值Fontawesome圖標

http://astronautweb.co/snippet/font-awesome/

結果

Image of results

乾杯！

來源

2015-10-07 12:56:12

邊界半徑不是字體真棒爲FA-棧工作

回答

相關問題