フォント-2色の素晴らしいfa-circle？

debugcn 投稿 Dev

ヒント

私は自分のページのように半円を取得しようとしていますが、fafa-adjustを使用して少し苦労しています

<i class="fa fa-adjust" style="color: green"></i>

この時点では、円の左側を変更することはできません。円の2色を構成できるように、CSSウィザードを使用できますか？右側を緑色、左側を灰色にしたい。

以下は、「fa-circle」と同じCSS設定で、（理想的には）必要な円です。fa-circle CSSをコピーして、CSSの微調整を作成できることを望んでいました。fontawesome.cssファイルに移動したとき、基本的に各タイプのコードがあったため、modを作成できませんでした。

どんな助けでも素晴らしいでしょう。みんなありがとう！

http://imgur.com/nRRxbxY

ryanpcmcquen

CSSグラデーションを使用します。

https://jsfiddle.net/ryanpcmcquen/n5kjjvx9/

.fa-adjust, .no-font-needed {
    color: transparent;
    background: linear-gradient(to right, #868789 0%, #868789 50%, #008000 50%, #008000 100%);
    border-radius: 50%;
    width: 300px;
    height: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-adjust"></i>

<p>Although, you do not need Font Awesome to do this:</p>
<div class="no-font-needed"></div>

正直なところ、これを実現するためにFont Awesomeを使用する必要はありません。ご覧のとおり<div>、私の例では、昔ながらの方法で同じことを行っています。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]