アイコンフォントと横の文字がずれる

[小宮山]

メニューなどにアイコンフォントを使用してみたのですが、アイコンと文字がずれてしまいます（写真１と２）。写真３のように、アイコンと文字がずれないようにするにはどうしたらいいのですか？よろしくお願いします。

添付ファイル:

添付ファイルを開くにはログインしてください。

[小宮山]

指定していたフォントが問題なようです。

“ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif

Arialを先頭にもっていくことで、解決できますが、上記フォントでも崩れない方法があれば教えて頂けると助かります。

[DigiPress サポート]

対象ページと具体的なソースをご提示ください。

[小宮山]

http://liberal.piconano.biz/contact/

具体的なソースとは、googleのツールのことでしょうか？
一応写真を載せておきます。
よろしくお願いします。

添付ファイル:

添付ファイルを開くにはログインしてください。

[DigiPress サポート]

ご自身にてカスタマイズされた状態に対するスタイリングに関数する無償サポートは具体的には対応致しかねますが、アイコンを指定している要素に別途任意のセレクタ(class)を付け、それに対して vertical-align の値(middle,text-bottomなど)を指定するなどしてください。

[小宮山]

カスタマイズを行わないデフォルトの状態でも、iphone6s　plusで見た場合（ほかのデバイスはないので、確認していません）若干ですが、アイコンが下になり、テキストが上になり、ずれています。

ここで、iosの標準フォントでもあるヒラギノ角ゴ Pro W3などを先頭に持ってきた

“ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif　

このようなfont-familyにすれば、アイコンとテキストのずれは、解消されます。

が

windows環境のpcでは当然ながらメイリオが優先されるので、ずれます。

vertical-align の値(middle,text-bottomなど)を指定するやり方を教えていただきましたが、デフォルト（フォントなどをカスタマイズしていない状態）でも、このやり方は、スマホとｐｃ、どちらかがずれてなくても、どちらかがずれている状態になってしまい、かといって、CSSの記述をスマホとｐｃでわけるのも正直めんどくさいです。（レスポンシブ対応テーマと書いてありますし）

解決策としては、FontAwesomeを使うことですべて解決できました。
こちらだとフォントをカスタマイズしても、スマホ/PCどちらでも同じ値にいてくれます。

細かい話なので、フォトショやイラレで確認していただければと思います。

Webフォントを利用して画像を使わずにアイコンを表示

こちらのアイコンの説明も、pc環境では相当ずれてますね。
スマホ（iphone6s plus)ではずれていません。

迅速に対応していただき、ありがとうございました。
いい勉強になりました。

添付ファイル:

添付ファイルを開くにはログインしてください。

[投稿者]

投稿