インスタグラムのアイコンを作る場合に、どのようなcssにすべきか。

Question

Instagramのアイコンを作成しています。画像通りのアイコンにするためには、どのようなcssを書くと良いでしょうか？

Comments

[yambejp]

アイコンをcssで書くとは？

[Strawberry-milk]

インスタグラムのアイコンの形を、cssにて作成したいです。どのようにcssを書くと良いでしょうか？

[yambejp]

アイコンは画像ですよね？
cssで書くものじゃないですけど・・・
普通にペイントソフトで書いて画像で保存して呼び出すのはダメなんですか？

[miyabi_pudding]

SVG使う方が、汎用性あるし、そっちの方が良いかと

[m.ts10806]

作業依頼はやめてください。
質問ではないです。teratailでの質問をできないならお引取りください

[1T2R3M4]

>Instagramのアイコンを作成
法人の商標を勝手に作成して大丈夫ですか。
使用用途は何でしょうか。

Answer 1

Instagramブランド | Instagram | Brand Portal

Comments

[Lhankor_Mhy]

もしかして、グラデーションの方のことかな……？

[Strawberry-milk]

cssのカッコ{}の中にどのように記入すればInstagramのボタンを作れますでしょうか？

[Lhankor_Mhy]

リンク先の説明をよく読んで、ダウンロードした画像を img 要素で貼り付ければいいと思いますよ。
どうしてもCSSでやりたいなら、yambejp さんのご回答のようにするか、background-image で指定するのがいいでしょう。

[Strawberry-milk]

真ん中にある白いマークを付け加えたいですね。どのように、cssに書き足していくのでしょうか？

[Lhankor_Mhy]

CSSを使う必要はなく、リンク先の説明をよく読んで、ダウンロードした画像を img 要素で貼り付ければいいと思いますよ。
どうしてもCSSでやりたいなら、yambejp さんのご回答のようにするか、background-image で指定するのがいいでしょう。

Answer 2

画像をアイコンのように使いたいならこんな処理になります
あとはbase64したpngファイルの文字列を記載してください

<style>
i.insta:before{
content:url("data:images/ping;base64,・・・");
}
</style>
test<i class="insta"></i>test

Comments

[Strawberry-milk]

````````````````````````````````````````````````
i.insta:before{
content:url("data:images/ping;base64,・・・");
````````````````````````````````````````````````

ここについて質問します。『content』と『"data:images/ping;base64,・・・"』というものは、それぞれどのようなものでしょうか？

あと、『"data:images/ping;base64,・・・"』についてです。これは、どのようなURLでしょうか？

Answer 3

https://javier.xyz/img2css/