html5 - このロゴは CSS スタイルを使用して作成されていますか?

Question

このようなコメント転送アイコンのソースコードを見てみると、絵ではなくスタイルのようですが、このスタイルはどうやって作られているのでしょうか?
# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

Answer 1

Iconfont が実装しました: http://www.iconfont.cn/

Answer 2

この Web サイトでアイコンを見つけて、CSS ファイルを生成してください。使用する場合は引用してください。

Answer 3

実際には、iconfontが使用されます
ブラウザのシステムで利用できないフォントをWebページに設定します
ブラウザはフォントファイルをダウンロードし、対応するフォントでレンダリングします

いわゆるフォントとは文字コードに対応したグラフィックのことです
例えば下の電話アイコンは実際には単語です
コピー＆ペーストを選択することもできます
ただし環境によって対応するフォントは異なります
表示形式異なる場合があります
最悪の場合設定される可能性があります フォント内にこのエンコードに対応するグラフィックが存在しない場合は表示されません。
☎

詳しくはアイコンフォントの使い方をご覧ください

これの利点は明白で、フォントもテキストであり、フォントのサイズ、色、装飾をスケーリングの歪みなしで他のテキスト要素に続いて設定できます

デメリットも明らかで、写真ではないので写真のようなカラフルなアイコンを実現できません

Answer 4

上に掲載されているのはアイコンを使用して実装されています。具体的なことを説明します。
1. まずウェブサイトでアイコンを選択してプロジェクトに保存し、ローカルにダウンロードします (ここでオンラインリンクを使用することもできます。下の図はアイコンフォントの 2 つの操作方法を示しています)

2.css でローカルまたはオンラインのリンクを導入します (上の図)。ローカルの方法は同じです。

3. 使用するスタイルのアイコンとしてフォントファミリーを指定し、途中で最初のアイコンをリロードするなどのアイコンコードを使用します

リーリー

Answer 5

フロントエンドはまさに海を渡る八仙のようなもので、それぞれが魔法の力を示しています。アイコンに加えて、base64、svg、さらにはキャンバスも実行できます

。

Answer 6

最も簡単な方法は、ブートストラップを使用することです
http://v3.bootcss.com/compone...
リンクでブートストラップを導入し、クラス名をラベルに直接追加するだけです
<button class="btn btn-default "> フルスクリーン<span class="glyphicon glyphicon-fullscreen"></span></button>