isara Twitterアイコン表示方法について

Question

分からない点　➔Twitter、いいねボタンの表示方法

閲覧ありがとうございます。
私は今isaraの模写をしています。

ツイッターといいねボタンのアイコンを表示したいのですが
お手本と同じアイコンがFontAwesomeでありませんでした。
参考URL　https://fontawesome.com/icons?from=io

↓見本

一応、以下のアイコンの表示には成功しているのですが
見本と同じアイコンの表示方法をご存じの方いらっしゃいましたら
教えて頂けませんでしょうか。

※検証モードからレスポンシブにして500×500にした場合
見本のサイトのアイコンが少し見切れてしまうのですがなぜでしょうか？参考URL　https://isara.life/

Answer 1

https://publish.twitter.com/ からツイートボタンを作成できます。

Twitterのツイートボタン設置方法まとめ2018年版 ｜ ぷろめし｜プログラミングよりも飯が好き

いいねボタンは下記で。
いいね！ボタン - ソーシャルプラグイン

Comments

[nakayamaakg]

回答いただきありがとうございます。
早速試してみたところ
ツイッターアイコンの左端の部分しか表視されませんでした。
これはどのように対処すれば宜しいでしょうか・・・
（一応見本を検証で見ていますが、どのコードが作用しているかわからず、すいません）

[hatena19]

リンク先でもちゃんと表示されてますし、私のサイトに試しに置いてみましたが、ちゃんと表示されました。
どこかに間違いがあるか、他の部分のHTMLかCSSが影響しているのかもしれません。
まず間違いがないかリンク先などを参考に確認してください。
間違いがないのなら、検証ツールで原因をさぐってみてください。
それで分からないのなら症状の再現できるHTMLコード、CSSコードを提示してください。

Answer 2

FontAwesome使って「それっぽいもの」を再現することは不可能ではないと思います。
それそのままのアイコンがなければCSS駆使して作れば良いだけとも言えます。

ただ、

isaraの模写をしています。

なら解析してしまえば良いのではないでしょうか。

どうもこの「模写」に変な制限を入れる人が多すぎるように思います。
既に回答に出ているようなことは知らなければ辿り着くことはできないわけですし（キーワードを適切に投入できればいけるでしょうが）、見ることも学びの一つです。
むしろ自身のレベルがまだまだである場合、見てから学ぶことのほうが多いとも言えます。（もちろん考えることが最も大事）

競合サイトのCSSとJavaScriptを丸裸にする方法というような記事にあるように、Webサイトの構造、構成を解析する技術は確立されており、むしろ適切にできることが技術の向上だけではなく様々なこと（もしかしたらマーケティングにも）に繋がるとも言える必須技術です。

「あ、このサイトのこれいいな」となったときに「自分で考えつつ、そこでやってることを参考にする」ということもあるでしょうし、場合によりそのまま拝借することもないわけではないです。
フロントサイドの技術は基本的に公開されているもの（minifyされてて簡単に読み解けないものもありますが）なので、技術的に盗めそうなものはどんどん盗んで身にしていくべきとも思います。

Comments

[m.ts10806]

＞低評価されたかた
孤独な戦いを続けられてるんでしょうか。
言いたいことがあるなら堂々と言ってください。
ひとまず運営相談はしています。