兩種字體真棒箭頭

，我試圖做同樣的HTML和CSS，有兩個字體真棒圖標。我把position:absolute作爲一個圖標靠近另一個。我試圖繞過這個圈子，但沒有取得任何成功。有人請給我一個手。

.formular { 
 
\t \t position: relative; 
 
\t } 
 
\t .formular a { 
 
\t \t text-decoration: none; 
 
\t } 
 
\t .circle .fa-caret-right { 
 
\t font-size: 17px; 
 
\t color: #000; 
 
\t } 
 
\t .circle { 
 
\t position: relative; 
 
\t border: 1px solid #CCCCCC; 
 
\t border-radius: 50%; 
 
\t background-color: #dce0e1; 
 
\t padding: 5px; 
 
\t } 
 
\t .circle .fa-caret-right:first-child { 
 
\t position: absolute; 
 
\t left: 4px; 
 
\t } 
 
\t .circle .fa-caret-right:last-child { 
 
\t position: relative; 
 
\t } 
 
\t .formular .text { 
 
\t font: normal 15px 'CenturyGothic-Bold'; 
 
\t color: #028A92; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
\t <div class="formular"> 
 
\t \t <a href="#" title="Click here"> 
 
\t \t \t <span class="circle"> 
 
\t \t \t \t <i class="fa fa-caret-right" aria-hidden="true"></i> 
 
\t \t \t \t <i class="fa fa-caret-right" aria-hidden="true"></i> 
 
\t \t \t </span> 
 
\t \t \t <span class="text">Ask for our forms</span> 
 
\t \t </a> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-08-30 John Smith

你並不真的需要FA爲。簡單：⏩您也可以結合CSS兩個▶來調整結果。 –

我必須改變這種

.formular .circle { 
     background: #efeded none repeat scroll 0 0; 
border: 1px solid #cbcbcb; 
border-radius: 50%; 
color: #000; 
display: inline-block; 
padding: 3px 3px 3px 7px; 
position: relative; 
text-align: center; 
} 

<span class="circle"> 
       <i class="fa fa-forward" aria-hidden="true"></i> 
       <!--<i class="fa fa-caret-right" aria-hidden="true"></i>--> 
      </span>

.formular { 
 
\t \t position: relative; 
 
\t } 
 
\t .formular a { 
 
\t \t text-decoration: none; 
 
\t } 
 
\t .circle .fa-caret-right { 
 
\t font-size: 17px; 
 
\t color: #000; 
 
\t } 
 
\t .formular .circle { 
 
\t  background: #efeded none repeat scroll 0 0; 
 
border: 1px solid #cbcbcb; 
 
border-radius: 50%; 
 
color: #000; 
 
display: inline-block; 
 
padding: 3px 3px 3px 7px; 
 
position: relative; 
 
text-align: center; 
 
} 
 
\t } 
 
\t .circle .fa-caret-right:first-child { 
 
\t position: absolute; 
 
\t left: 4px; 
 
\t } 
 
\t .circle .fa-caret-right:last-child { 
 
\t position: relative; 
 
\t } 
 
\t .formular .text { 
 
\t font: normal 15px 'CenturyGothic-Bold'; 
 
\t color: #028A92; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
\t <div class="formular"> 
 
\t \t <a href="#" title="Click here"> 
 
\t \t \t <span class="circle"> 
 
\t \t \t \t <i class="fa fa-forward" aria-hidden="true"></i> 
 
\t \t \t \t <!--<i class="fa fa-caret-right" aria-hidden="true"></i>--> 
 
\t \t \t </span> 
 
\t \t \t <span class="text">Ask for our forms</span> 
 
\t \t </a> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-08-30 12:51:06

你可能需要在.circle類多一點填充，例如：

.circle { padding: 10px }

這不是創建此按鈕的最佳方式，但正如您只是想要一隻手，希望有所幫助。 :)

你將不得不圍繞一點點調整圓的形狀，使其完美。

來源

2016-08-30 12:59:14 Praym

Css中的小改變。檢查下面的鏈接可以幫助你

.circle .fa-caret-right:first-child { 
    position: absolute; 
    left: 6px; 

} 
.circle .fa-caret-right:last-child { 
    position: relative; 
left: 5px; 
}

visit the link:https://jsfiddle.net/crxsL3qt/

來源

2016-08-30 13:01:03

兩種字體真棒箭頭

回答

相關問題