<i>タグで使用するアイコンを<article>要素などで作ったボタンの中に表示したい

前提・実現したいこと

<i>タグで使用するアイコンを<article>要素などで作ったボタンの中に表示したい。

画像はサンプルですが、以下のようなボタンを作りたいと考えております。

発生している問題・エラーメッセージ

アイコンを表示させようとしたところ、表示されないもしくは小さくて見えないなどの問題が発生しております。

該当のソースコード

HTML
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
2
3
4
5<article class="contents-form-right">
6	<p><a href="#" class="btn-green" style="vertical-align:middle;">
7	<i class="fa fa-phone">電話する</i></a></p>
8</article>
9

試したこと

現在は元の画面より単純化しておりますが、CSS読み込みの位置を調整したり、<a>タグの内部の位置を調整するなどしましたが、アイコンは表示されておりません。

<i>タグを使ってボタンを作るのは不得手なので、美味いやり方をご存知の方がいれば教えてもらえればと思います。

追記

申し訳ございません。
最初に掲載したソースに間違いがございました。

ご指摘の通り、ソースを変更したらアイコンは表示されました。
しかし、サンプル画像のようなボタンを作ろうとすると、アイコンが表示されなくなってしまいます。
アイコンが表示されるボタンにしたいのですが、どのようにすればよいでしょうか？

私のミスで不要な時間を取らせてしまい、申し訳ございません。

退会済みユーザー

2018/06/23 14:53

どのように表示するのが意図した形なのでしょう。画像などで説明が必要だと思いますよ。

gl00my

2018/06/23 16:30

ボタンの状態にした時に表示出来なくなってしまう原因はcssを拝見できていないので一概にお答えできません。cssの記載をお願いします。

行動規範の内容に同意します

回答2件

初めまして、こんばんは。

font-awesomeのアイコンを表示させ、アイコン右側に文字列を表示させたい、という認識であっていますでしょうか？違っていましたら申し訳ありません。

よくあるiタグでfont-awesomeのアイコンを表示させる方法であれば、iタグに付いているクラス名は正しいものでしょうか？
通常であればクラス名はfa fa-phoneのように使いたいアイコンに従ったクラス名をつけるのですが、そちらの確認はされていますでしょうか。
またiタグでfont-awesomeを表示する場合、中身を空にして使います。

少しでもご参考になれば幸いです。

投稿2018/06/23 15:51

gl00my

総合スコア53