5

parallax pro genesis 子テーマを使用しているので、ウィジェットエリア内で作業しています。

これが正しい方法であるかどうかはわかりませんが、ウィジェット領域でこれを行うことにより、フォントの素晴らしいアイコンの下に書き込もうとしました:

<i class="fa fa-code fa-4x">Fully mobile responsive designs 
that adjust to fit all platforms</i>

それは機能しますが、テキストは巨大です。テキストのサイズを変更するにはどうすればよいですか? font awesome css フォルダの .fa-code セクションで font-size を変更しようとしましたが、うまくいきません。アイコンの下に書くためのより良い方法はありますか、それともこの方法で行うべきですか?

ありがとう！

4

4 に答える 4

14

実際、font-awesome アイコンはテキスト シンボルです。これは、そのサイズがfont-sizeプロパティの影響を受けることを意味します。

faCSS クラスは、font-awesome フォントと一般的なスタイルを表します。
fa-codeCSS クラスは、特定のアイコンを表します。
fa-4xCSS クラスは「font-size: 4em;」の略です。

テキストを FA スパンに含めると、テキスト全体が 4 倍になることを意味します。<i>あなたの例では、タグ内にテキストはありません。

<i class="fa fa-code fa-4x"></i> 
Fully mobile responsive designs that adjust to fit all platforms

iこれで、通常どおりタグの外側のテキストを操作できます。

以下の作業例を参照してください。

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row text-center">
  <i class="fa fa-code fa-4x"></i>
</div>
<div class="row text-center">    
  <span class="red-text-for-example">Fully mobile responsive designs that adjust to fit all platforms</span>
 </div>

ここを見てください：http://jsfiddle.net/c3Lbcmjb/

font-awesome.cssまた、ファイルを変更しないでください。
サイズ、フォント、色などを制御するための多くの便利な方法を提供します。

FA アイコンのサイズで操作したい場合は、fa-4xクラスをなどに変更します (FA アイコンをテキストと同じサイズにする必要がある場合はfa-3x、クラスをfa-2xまったく削除します)。

于 2015-06-08T04:17:48.097 に答える
2

解決：

メインのスタイルシートを使用して、以下を追加するだけです:

.fa-code {
    font-size: 20px;
}

上記は、フォントの素晴らしいコード アイコンのみを対象としています。すべてのアイコンをターゲットにしたい場合は、次を使用してください。

.fa {
    font-size: 20px;
}

または、インライン スタイルを追加することもできます。これは良い方法とは見なされませんが、両方の方法を説明すると思います。

<i class="fa fa-code" style="font-size: 20px;">Fully mobile responsive designs that adjust to fit all platforms</i>

20px例として使用しましたが、必要に応じて値を変更してください。お役に立てれば！

于 2015-06-08T04:20:14.477 に答える
0

CSSインラインまたは外部を使用できます

<i class="fa fa-code fa-6" style="font-size: 7em;"></i>

于 2015-06-08T04:21:43.613 に答える