二フォント素晴らしい矢印が

私は、このイメージがあります二フォント素晴らしい矢印が

をし、私は2つのフォント素晴らしいアイコンで、HTMLとCSSで同じことをやってみました。私はposition:absoluteをアイコンの1つが近くになるように入れました。私は周りを円を描こうとしましたが、成功しませんでした。誰かが私に手を差し伸べてください。

.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を必要としません。シンプル：⏩結果を調整するために、2つの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 { 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

二フォント素晴らしい矢印が

答えて

関連する問題