亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

常見unicode symbols,讓你擺脫常見的icons(二)

標簽:
Html/CSS

需要在您的设计中添加一个图标,但是您不想将图像或整个图标字体(如Font Awesome)包含在您的页面中? 我们对您有好消息 - 您的浏览器中已有大量可用的图标和字形库。 它被称为Unicode,它是为不断扩大的数字(目前超过110 000)的字符,符号和图标分配唯一标识符的标准。

这并不意味着你可以选择十万个图标。 由浏览器来呈现它们,它使用系统上安装的字体来实现。 在本文中,我们收集了许多可用于Windows,Linux,OS X,Android和iOS的符号。 您可以在今天的网页设计中使用它们

提示:有一篇很好的文章解释了您需要了解的关于字符编码和Unicode的一切,我们建议每个软件开发人员阅读。

如何使用---very easy!
  1. Find an icon that you like. We've provided small and large previews.
  2. Copy the code.
  3. Paste it in your HTML as regular text. In your CSS, you can use it as the value of the content property. In JS, PHP and other programming languages, you can use it as text in strings.
  4. You can customize the icons by setting a font-size, color and text shadows, just like regular text.

总结如下:

<h2>Pointers</h2>
        <table>
            <tbody>
                <tr>
                </tr>
                <tr>
                    <td>Pointer Left Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x261a;</td>
                </tr>
                <tr>
                    <td>Pointer Right Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x261b;</td>
                </tr>
                <tr>
                    <td>Pointer Left White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x261c;</td>
                </tr>
                <tr>
                    <td>Pointer Up White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x261d;</td>
                </tr>
                <tr>
                    <td>Pointer Right White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x261e;</td>
                </tr>
                <tr>
                    <td>Pointer Down White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x261f;</td>
                </tr>
            </tbody>
        </table>
        <h2>Card Suits</h2>
        <table>
            <tbody>
                <tr>
                </tr>
                <tr>
                    <td>Spades Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2660;</td>
                </tr>
                <tr>
                    <td>Hearts Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2665;</td>
                </tr>
                <tr>
                    <td>Diamonds Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2666;</td>
                </tr>
                <tr>
                    <td>Clubs Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2663;</td>
                </tr>
                <tr>
                    <td>Spades White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2664;</td>
                </tr>
                <tr>
                    <td>Hearts White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2661;</td>
                </tr>
                <tr>
                    <td>Diamonds White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2662;</td>
                </tr>
                <tr>
                    <td>Clubs White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2667;</td>
                </tr>
            </tbody>
        </table>
        <h2>Chess</h2>
        <table>
            <tbody>
                <tr>
                </tr>
                <tr>
                    <td>King White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2654;</td>
                </tr>
                <tr>
                    <td>Queen White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2655;</td>
                </tr>
                <tr>
                    <td>Rook White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2656;</td>
                </tr>
                <tr>
                    <td>Bishop White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2657;</td>
                </tr>
                <tr>
                    <td>Knight White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2658;</td>
                </tr>
                <tr>
                    <td>Pawn White</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2659;</td>
                </tr>
                <tr>
                    <td>King Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x265a;</td>
                </tr>
                <tr>
                    <td>Queen Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x265b;</td>
                </tr>
                <tr>
                    <td>Rook Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x265c;</td>
                </tr>
                <tr>
                    <td>Bishop Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x265d;</td>
                </tr>
                <tr>
                    <td>Knight Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x265e;</td>
                </tr>
                <tr>
                    <td>Pawn Black</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x265f;</td>
                </tr>
            </tbody>
        </table>
        <h2>Maths</h2>
        <table>
            <tbody>
                <tr>
                </tr>
                <tr>
                    <td>Infinity</td>
                    <td>∞</td>
                    <td>∞</td>
                    <td>&amp;#x221e;</td>
                </tr>
                <tr>
                    <td>Plus Minus</td>
                    <td>±</td>
                    <td>±</td>
                    <td>&amp;#xb1;</td>
                </tr>
                <tr>
                    <td>Less-Than Or Equal To</td>
                    <td>≤</td>
                    <td>≤</td>
                    <td>&amp;#x2264;</td>
                </tr>
                <tr>
                    <td>More-Than Or Equal To</td>
                    <td>≥</td>
                    <td>≥</td>
                    <td>&amp;#x2265;</td>
                </tr>
                <tr>
                    <td>Not Equal To</td>
                    <td>≠</td>
                    <td>≠</td>
                    <td>&amp;#x2260;</td>
                </tr>
                <tr>
                    <td>Division</td>
                    <td>÷</td>
                    <td>÷</td>
                    <td>&amp;#xf7;</td>
                </tr>
                <tr>
                    <td>Multiplication x</td>
                    <td>×</td>
                    <td>×</td>
                    <td>&amp;#xd7;</td>
                </tr>
                <tr>
                    <td>Heavy Multiplication x</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x2716;</td>
                </tr>
                <tr>
                    <td>Superscript One</td>
                    <td>¹</td>
                    <td>¹</td>
                    <td>&amp;#xb9;</td>
                </tr>
                <tr>
                    <td>Superscript Two</td>
                    <td>²</td>
                    <td>²</td>
                    <td>&amp;#xb2;</td>
                </tr>
                <tr>
                    <td>Superscript Three</td>
                    <td>³</td>
                    <td>³</td>
                    <td>&amp;#xb3;</td>
                </tr>
                <tr>
                    <td>Circled Plus</td>
                    <td>⊕</td>
                    <td>⊕</td>
                    <td>&amp;#x2295;</td>
                </tr>
                <tr>
                    <td>Circled Multiplication</td>
                    <td>⊗</td>
                    <td>⊗</td>
                    <td>&amp;#x2297;</td>
                </tr>
                <tr>
                    <td>Logical AND</td>
                    <td>∧</td>
                    <td>∧</td>
                    <td>&amp;#x2227;</td>
                </tr>
                <tr>
                    <td>Logical OR</td>
                    <td>∨</td>
                    <td>∨</td>
                    <td>&amp;#x2228;</td>
                </tr>
                <tr>
                    <td>Delta</td>
                    <td>∆</td>
                    <td>∆</td>
                    <td>&amp;#x2206;</td>
                </tr>
                <tr>
                    <td>Pie</td>
                    <td>∏</td>
                    <td>∏</td>
                    <td>&amp;#x220f;</td>
                </tr>
                <tr>
                    <td>Sigma (SUM)</td>
                    <td>∑</td>
                    <td>∑</td>
                    <td>&amp;#x2211;</td>
                </tr>
                <tr>
                    <td>Omega</td>
                    <td>Ω</td>
                    <td>Ω</td>
                    <td>&amp;#x3a9;</td>
                </tr>
                <tr>
                    <td>Empty Set</td>
                    <td>∅</td>
                    <td>∅</td>
                    <td>&amp;#x2205;</td>
                </tr>
                <tr>
                    <td>Angle</td>
                    <td>∠</td>
                    <td>∠</td>
                    <td>&amp;#x2220;</td>
                </tr>
                <tr>
                    <td>Parallel</td>
                    <td>∥</td>
                    <td>∥</td>
                    <td>&amp;#x2225;</td>
                </tr>
                <tr>
                    <td>Perpendicular</td>
                    <td>⊥</td>
                    <td>⊥</td>
                    <td>&amp;#x22a5;</td>
                </tr>
                <tr>
                    <td>Almost Equal To</td>
                    <td>≈</td>
                    <td>≈</td>
                    <td>&amp;#x2248;</td>
                </tr>
                <tr>
                    <td>Triangle</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x25b3;</td>
                </tr>
                <tr>
                    <td>Circle</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x25CB;</td>
                </tr>
                <tr>
                    <td>Square</td>
                    <td></td>
                    <td></td>
                    <td>&amp;#x25A1;</td>
                </tr>
            </tbody>
        </table>
        <h2>Fractions</h2>
        <table>
            <tbody>
                <tr>
                </tr>
                <tr>
                    <td>One Quarter (1/4)</td>
                    <td>¼</td>
                    <td>¼</td>
                    <td>&amp;#xbc;</td>
                </tr>
                <tr>
                    <td>One Half (1/2)</td>
                    <td>½</td>
                    <td>½</td>
                    <td>&amp;#xbd;</td>
                </tr>
                <tr>
                    <td>Three Quarters (3/4)</td>
                    <td>¾</td>
                    <td>¾</td>
                    <td>&amp;#xbe;</td>
                </tr>
                <tr>
                    <td>One Third (1/3)</td>
                    <td>⅓</td>
                    <td>⅓</td>
                    <td>&amp;#x2153;</td>
                </tr>
                <tr>
                    <td>Two Thirds (2/3)</td>
                    <td>⅔</td>
                    <td>⅔</td>
                    <td>&amp;#x2154;</td>
                </tr>
                <tr>
                    <td>One Eight (1/8)</td>
                    <td>⅛</td>
                    <td>⅛</td>
                    <td>&amp;#x215b;</td>
                </tr>
                <tr>
                    <td>Three Eights (3/8)</td>
                    <td>⅜</td>
                    <td>⅜</td>
                    <td>&amp;#x215c;</td>
                </tr>
                <tr>
                    <td>Five Eights (5/8)</td>
                    <td>⅝</td>
                    <td>⅝</td>
                    <td>&amp;#x215d;</td>
                </tr>
                <tr>
                    <td>Seven Eights (7/8)</td>
                    <td>⅞</td>
                    <td>⅞</td>
                    <td>&amp;#x215e;</td>
                </tr>
            </tbody>
        </table>
        <h2>Roman Numerals</h2>
        <table>
            <tbody>
                <tr>
                </tr>
                <tr>
                    <td>Roman Numeral One</td>
                    <td>Ⅰ</td>
                    <td>Ⅰ</td>
                    <td>&amp;#x2160;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Two</td>
                    <td>Ⅱ</td>
                    <td>Ⅱ</td>
                    <td>&amp;#x2161;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Three</td>
                    <td>Ⅲ</td>
                    <td>Ⅲ</td>
                    <td>&amp;#x2162;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Four</td>
                    <td>Ⅳ</td>
                    <td>Ⅳ</td>
                    <td>&amp;#x2163;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Five</td>
                    <td>Ⅴ</td>
                    <td>Ⅴ</td>
                    <td>&amp;#x2164;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Six</td>
                    <td>Ⅵ</td>
                    <td>Ⅵ</td>
                    <td>&amp;#x2165;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Seven</td>
                    <td>Ⅶ</td>
                    <td>Ⅶ</td>
                    <td>&amp;#x2166;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Eight</td>
                    <td>Ⅷ</td>
                    <td>Ⅷ</td>
                    <td>&amp;#x2167;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Nine</td>
                    <td>Ⅸ</td>
                    <td>Ⅸ</td>
                    <td>&amp;#x2168;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Ten</td>
                    <td>Ⅹ</td>
                    <td>Ⅹ</td>
                    <td>&amp;#x2169;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Eleven</td>
                    <td>Ⅺ</td>
                    <td>Ⅺ</td>
                    <td>&amp;#x216a;</td>
                </tr>
                <tr>
                    <td>Roman Numeral Twelve</td>
                    <td>Ⅻ</td>
                    <td>Ⅻ</td>
                    <td>&amp;#x216b;</td>
                </tr>
            </tbody>
        </table>
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
7245
獲贊與收藏
3475

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消