アイコンフォントの活用について

[river]

あるサイトで、円にアイコンを入れてバーをつけるデザインがあり、使いたいのですが、うまくいかず困っているので、教えていただけませんでしょうか。

そのCSSでは、下記に記述があります。（クエスチョンマークのアイコンです。）

font-family: FontAwesome;
content: “\f135”;

まず、FontAwesomeをインストールしてやってみると上手くいきました。
しかし、SNSのアイコンなどに不具合が出て停止しました。

そこで、質問ですが、既に入っているアイコンフォント　icon-help　がほとんど同じなので、これを上記のように記号に置き換えることはできませんでしょうか？
マニュアルを拝見すると、クラス指定の方法はありますが、上記のような形ではないので、困っています。
よろしくお願いいたします。

参考までに使用したいデザインのコードを下記に記載します。

●HTML
<h1>美しい見出しのデザイン</h1>

●CSS
h1 {
position: relative;
background: #ffd98a;
padding: 2px 5px 2px 25px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

h1:before {
font-family: FontAwesome;
content: “\f135”;
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ffa337;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
}

[DigiPress サポート]

テーマには直接関係がありませんので詳細については対応致しかねますが、テーマには自前で選定されたアイコンフォントが含まれているため、重複するようなアイコンフォントデータを更に読み込むことは、不必要に転送量を増やしてレスポンスが悪くなるため、避けてください。

FontAwsomeには多数のフォントが含まれていますが、その分フォントファイルサイズが大きく、利用者にとっては使用しないフォントも多数含まれることになり、軽量化や最適化の面で考えればあまりおすすめはできません。
可能な限りテーマに組み込まれているアイコンフォントを利用してください。

表示可能なアイコンフォント一覧

DigiPressでは利便性の高いアイコンフォントに厳選し、その都度リクエストを受け付けて追加拡張していますので、追加を希望するフォントがある場合は、別途リクエストしてください。

例えば、DigiPressにも?マークのアイコンがあり、適当にセレクタを用意してCSSを適用すればどのようにも表示はできます。

例：

.help-circle::before {
display: inline-block;
margin: 0;
font-size:20px;
text-align:center;
width: 40px;
line-height: 40px;
color:#fff;
background-color: #ffa337; 
border: solid 3px #fff;
border-radius: 50%;
}

<i class="icon-help help-circle"></i>

[投稿者]

投稿