web-dev-qa-db-ja.com

この▲またはこの▼のHTML文字コード

この上矢印のHTMLエンティティ文字コードは何ですか（▲）とその下向きの犬バージョン（▼）？

コードがわからないので、これらの矢印を表すためにGIFを使用しています。

htmlunicodecharacterhtml-entities
39
Ram

通常、 優秀なGucharmap を使用してUnicode文字を検索します。 「Character Map」という名前でGnomeを使用して、最近のすべてのLinuxインストールにインストールされます。 WindowsまたはMac OS X用の同等のツールは知りませんが、そのホームページにはいくつかリストされています。

53
Joachim Sauer

4つの方向を向く大きな黒い三角形と小さな黒い三角形は、次のように表すことができます。

▲▲

▴▴

▶▶

▸▸

►►

▼▼

▾▾

◀◀

◂◂

◄◄

47
Erich Horn

下向きの三角形と上向きの三角形を表示するには、いくつかの正しい方法があります。

方法1：10進数のHTMLエンティティを使用する

HTML

▲
▼

方法2：16進HTMLエンティティを使用する

HTML

▲
▼

方法3：文字を直接使用する

HTML

▲
▼

方法4：CSSを使用する

HTML

<span class='icon-up'></span>
<span class='icon-down'></span>

CSS

.icon-up:before {
    content: "\25B2";
}

.icon-down:before {
    content: "\25BC";
}

これら3つのメソッドのそれぞれは、同じ出力を持つ必要があります。他のシンボルには、同じ3つのオプションがあります。 4番目のオプションもあり、文字列ベースの参照を使用できます（例：&hearts;で♥を表示）。

nicode-table.comのような参照Webサイトを使用して、UNICODEでサポートされているアイコンと対応するコードを見つけることができます。たとえば、下向きの三角形の値はhttp://unicode-table.com/en/25BC/にあります。

これらのメソッドは、すべてのブラウザでデフォルトで使用可能なアイコンに対してのみ十分であることに注意してください。 ☃、❄、★、☂、☭、⎗、またはlikeのような記号の場合、これはほとんどありません。他のUNICODEシンボルのクロスブラウザサポートを提供することは可能ですが、手順はもう少し複雑です。

あまり一般的ではないUNICODE文字のサポートを追加する方法を知りたい場合は、nicode補足多言語平面記号を使用してWebフォントを作成を参照してください。この。

背景画像

まったく異なる戦略は、フォントの代わりに背景画像を使用することです。最適なパフォーマンスを得るには、たとえばで説明したように、ベースエンコードして画像をCSSファイルに埋め込むのが最適です。 @ weasel5i2および@Obsidian。 GIFではなくSVGを使用することをお勧めしますが、パフォーマンスとシンボルの鮮明さの両方の点で優れています。

次のコードは、base64のSVGバージョンです enter image description here アイコン：

/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=

背景画像またはフォントを使用する場合

多くのユースケースでは、SVGベースの背景画像とアイコンフォントは、パフォーマンスと柔軟性の点でほぼ同等です。どちらを選択するかを決定するには、次の違いを考慮してください。

SVG画像

  • 彼らは複数の色を持つことができます
  • 独自のCSSを埋め込んだり、HTMLドキュメントでスタイルを設定したりできます。
  • CSSに埋め込まれ、HTMLに埋め込まれた個別のファイルとして読み込むことができます
  • 各シンボルは、XMLコードまたはbase64コードで表されます。コードエディター内で文字を直接使用したり、HTMLエンティティを使用したりすることはできません
  • 同じシンボルを複数回使用すると、XMLコードがHTMLに埋め込まれている場合、シンボルが重複することになります。ファイルをCSSに埋め込んだり、別のファイルとしてロードする場合、複製は不要です
  • color、font-size、line-height、background-color、またはその他のフォント関連のスタイリング規則を使用してアイコンの表示を変更することはできませんが、個別の図形としてのアイコン。
  • SVGやbase64エンコーディングの知識が必要です
  • IEの古いバージョンでは制限付きまたはサポートなし

アイコンフォント

  • アイコンには、1つの塗りつぶし色、1つの背景色などしか設定できません。
  • アイコンはCSSまたはHTMLに埋め込むことができます。 HTMLでは、文字を直接使用するか、HTMLエンティティを使用して表現できます。
  • 一部のシンボルは、Webフォントを使用せずに表示できます。ほとんどのシンボルはできません。
  • 同じ記号を複数回使用すると、文字がHTMLに埋め込まれたときに記号が重複することになります。ファイルをCSSに埋め込む場合、複製は不要です。
  • color、font-size、line-height、background-colorまたはその他のフォント関連のスタイリングルールを使用して、アイコンの表示を変更できます。
  • 特別な技術知識は必要ありません
  • IEの古いバージョンを含む、すべての主要なブラウザーでのサポート

個人的には、複数の色が必要で、color、background-color、およびフォントの他の色関連のCSSルールではそれらの色を実現できない場合にのみ、背景画像の使用をお勧めします。

SVG画像を使用する主な利点は、シンボルのさまざまなコンポーネントに独自のスタイルを与えることができることです。 HTMLドキュメントにSVG XMLコードを埋め込む場合、これはHTMLのスタイル設定に非常に似ています。ただし、これにより、HTMLタグとSVGタグの両方を使用するWebページが作成され、Webページの可読性が大幅に低下する可能性があります。また、シンボルが複数のページに渡って繰り返される場合、余分な膨張を追加し、古いバージョンのIEがSVGをサポートしていないか、制限されていることを考慮する必要があります。

11
John Slegers

文字コードを使用する必要はありません。 UTF-8を使用して、文字どおりに入力してください。そのようです：

▲▼

エンティティを絶対に使用する必要がある場合、それらは＃x25b2です。および＃x25bc;。

9
Williham Totland

&#9650;はUnicodeの黒の上向き三角形（▲）で、&#9660;は黒い下向きの三角形（▼）です。

（Webからコピーされた）文字を このサイト にプラグインするだけで検索できます。

4
paxdiablo

このページを確認してください http://www.alanwood.net/unicode/geometric_shapes.html 、最初は「9650▲25B2 BLACK UP-POINTING TRIANGLE（現在2番目の「9660▼25BC BLACK DOWN-POINTING TRIANGLE（WGL4に存在）」。

1
Karel Frajták