Quảng cáo

100+ biểu tượng unicode dành cho web designer

Khi thiết kế giao diện website thì thường bạn sẽ cần thêm các biểu tượng vào trong thiết kế của mình. Vậy bạn đang sử dụng cách nào?

Có lẽ nhiều bạn sẽ sử dụng FontAwesome làm thư viện biểu tượng của mình. Như khi bạn sử dụng Font Awesome bạn sẽ phải thêm toàn bộ biểu tượng của Font Awesome vào trong thiết kế của mình. Điều đó sẽ làm cho Tốc độ tải trang web của bạn bị chậm đi. Vậy làm thế nào?

Mình có tin tốt cho bạn đây - có một thư viện khổng lồ các biểu tượng và glyph có sẵn trong trình duyệt của bạn. Nó được gọi là Unicode , và nó là một tiêu chuẩn chỉ định một mã định danh duy nhất cho một số lượng ngày càng mở rộng (hiện tại là hơn 110 000) các ký tự, ký hiệu và biểu tượng.

Tuy nhiên, điều này không có nghĩa là bạn có hàng trăm nghìn biểu tượng. Việc kết xuất chúng tùy thuộc vào trình duyệt và nó sử dụng các phông chữ được cài đặt trên hệ thống để làm như vậy. Trong bài viết này, chúng tôi đã thu thập một số ký hiệu có sẵn trên Windows, Linux, OS X, Android và iOS. Bạn có thể sử dụng chúng trong các thiết kế trang web của mình ngay hôm nay!

Cách sử dụng các biểu tượng này

Các biểu tượng được cung cấp trong bảng bên dưới, là các ký tự thông thường, bạn có thể sao chép và dán như thể chúng là các chữ cái của văn bản. Nhưng nếu mã hóa được sử dụng để lưu các tệp HTML / CSS của bạn không phải là UTF-8, chúng có thể không hiển thị. Đây là lý do tại sao chúng tôi đã cung cấp mã thoát HTML, mã này sẽ luôn hoạt động. Đây là những gì bạn cần làm để sử dụng các biểu tượng này:

Tìm một biểu tượng mà bạn thích. Chúng tôi đã cung cấp các bản xem trước nhỏ và lớn.
Sao chép mã.
Dán nó vào HTML của bạn dưới dạng văn bản thông thường. Trong CSS của bạn, bạn có thể sử dụng nó làm giá trị của thuộc tính nội dung. Trong JS, PHP và các ngôn ngữ lập trình khác, bạn có thể sử dụng nó dưới dạng văn bản trong chuỗi.
Bạn có thể tùy chỉnh các biểu tượng bằng cách đặt kích thước phông chữ, màu sắc và bóng chữ, giống như văn bản thông thường.

Giống như biểu tượng

Mặt cười	☺	☺	& # x263a;
Suối nước nóng	♨	♨	& # x2668;
8 bóng	➑	➑	& # x2791;
ngôi sao trắng	☆	☆	& # x2606;
Ngôi sao đen	★	★	& # x2605;
Trái tim trắng	♡	♡	& # x2661;
Tim đen	❤	❤	& # x2764;
Máy bay	✈	✈	& # x2708;
Kéo đen	✂	✂	& # x2702;
Kéo trắng	✄	✄	& # x2704;
Vương miện	♕	♕	& # x2655;
Gạch chéo	✝	✝	& # x271d;
Vòng tròn đen trắng	◑	◑	& # x25d1;
Tám lưu ý	♪	♪	& # x266a;
Ghi chú thứ tám được chiếu	♫	♫	& # x266b;
Dấu hoa thị hình bốn quả cầu	✣	✣	& # x2723;
Ngôi sao trắng có hình tròn	✪	✪	& # x272a;
ngôi sao trắng	✰	✰	& # x2730;
Ngôi sao bốn cánh màu trắng	✧	✧	& # x2727;
Ngôi sao bốn nhọn màu đen	✦	✦	& # x2726;
Kiểm tra hòm phiếu	☑	☑	& # x2611;
Đánh dấu	✔	✔	& # x2714;
Dấu chéo	✘	✘	& # x2718;
Cây bút chì	✎	✎	& # x270e;
Viết tay	✍	✍	& # x270d;
Giống cái	♀	♀	& # x2640;
Nam giới	♂	♂	& # x2642;
Điện thoại đen	☎	☎	& # x260e;
Điện thoại trắng	☏	☏	& # x260f;
Phong bì	✉	✉	& # x2709;
Vị trí điện thoại	✆	✆	& # x2706;

Mũi tên

Mũi tên sang trái	←	←	& # x2190;
Mũi tên sang phải	→	→	& # x2192;
Mũi tên hướng lên	↑	↑	& # x2191;
Mũi tên hướng xuống	↓	↓	& # x2193;
Mũi tên trái phải	↔	↔	& # x2194;
Mũi tên Lên xuống	↕	↕	& # x2195;
Mũi tên Phải và Mũi tên Trái	⇄	⇄	& # x21c4;
Mũi tên Lên và Xuống	⇅	⇅	& # x21c5;
Mũi tên 90deg Xuống trái	↲	↲	& # x21b2;
Mũi tên 90deg Xuống phải	↳	↳	& # x21b3;
Mũi tên 90deg Lên phải	↱	↱	& # x21b1;
Mũi tên sang trái để thanh	⇤	⇤	& # x21e4;
Mũi tên bán nguyệt ngược chiều kim đồng hồ	↶	↶	& # x21b6;
Mũi tên bán nguyệt theo chiều kim đồng hồ	↷	↷	& # x21b7;
Mũi tên vòng tròn ngược chiều kim đồng hồ	↺	↺	& # x21ba;
Mũi tên vòng tròn theo chiều kim đồng hồ	↻	↻	& # x21bb;
Mũi tên rộng hướng sang phải	➔	➔	& # x2794;
Mũi tên ngoằn ngoèo hướng xuống	↯	↯	& # x21af;
North West Arrow	↖	↖	& # x2196;
Mũi tên Đông Nam nặng	➘	➘	& # x2798;
Mũi tên sang phải nặng	➙	➙	& # x2799;
Mũi tên Đông Bắc nặng	➚	➚	& # x279a;
Dấu gạch ngang Mũi tên sang phải	➟	➟	& # x279f;
Dấu chấm Mũi tên sang trái	⇠	⇠	& # x21e0;
Mũi tên đen sang phải	➤	➤	& # x27a4;
Mũi tên trắng sang trái	⇦	⇦	& # x21e6;
Mũi tên trắng sang phải	⇨	⇨	& # x21e8;
Dấu ngoặc kép góc trái	«	«	& # xab;
Dấu ngoặc kép góc phải	»	»	& # xbb;
Con trỏ màu đen bên phải	►	►	& # x25ba;
Con trỏ màu đen bên trái	◀	◀	& # x25c0;
Lên con trỏ màu đen	▲	▲	& # x25b2;
Con trỏ màu trắng bên phải	▷	▷	& # x25b7;
Con trỏ màu trắng bên trái	◁	◁	& # x25c1;
Lên con trỏ màu trắng	△	△	& # x25b3;

Đặc biệt

Numero	№	№	& # x2116;
Bản quyền	©	©	& # xa9;
Đăng ký	®	®	& # xae;
Nhãn hiệu	™	™	& # x2122;
Ước lượng	℮	℮	& # x212e;
Đạn	•	•	& # x2022;
Dấu chấm giữa	·	·	& # xb7;

Tiền tệ

Euro	€	€	& # x20ac;
Pao	£	£	& # xa3;
Lira	₤	₤	& # x20a4;
Yên	¥	¥	& # xa5;
Cent	¢	¢	& # xa2;
Tiền tệ	¤	¤	& # xa4;

Thời tiết

Bằng	°	°	& # xb0;
Mặt trời nhỏ	☀	☀	& # x2600;
Mặt trời lớn	☼	☼	& # x263c;
Mây	☁	☁	& # x2601;
Bông tuyết 1	❆	❆	& # x2746;
Bông tuyết 2	❅	❅	& # x2745;
Bông tuyết 3	❄	❄	& # x2744;

Con trỏ

Con trỏ trái màu đen	☚	☚	& # x261a;
Con trỏ bên phải màu đen	☛	☛	& # x261b;
Con trỏ bên trái màu trắng	☜	☜	& # x261c;
Con trỏ lên màu trắng	☝	☝	& # x261d;
Con trỏ Bên phải Màu trắng	☞	☞	& # x261e;
Con trỏ xuống màu trắng	☟	☟	& # x261f;

Bộ đồ thẻ

Spades đen	♠	♠	& # x2660;
Trái tim màu đen	♥	♥	& # x2665;
Kim cương đen	♦	♦	& # x2666;
Câu lạc bộ đen	♣	♣	& # x2663;
Spades trắng	♤	♤	& # x2664;
Trái tim màu trắng	♡	♡	& # x2661;
Kim cương trắng	♢	♢	& # x2662;
Câu lạc bộ trắng	♧	♧	& # x2667;

Cờ vua

Vua trắng	♔	♔	& # x2654;
Nữ hoàng trắng	♕	♕	& # x2655;
Rook trắng	♖	♖	& # x2656;
Bishop White	♗	♗	& # x2657;
Hiệp sĩ trắng	♘	♘	& # x2658;
Cầm đồ trắng	♙	♙	& # x2659;
Vua đen	♚	♚	& # x265a;
Nữ hoàng đen	♛	♛	& # x265b;
Rook đen	♜	♜	& # x265c;
Bishop đen	♝	♝	& # x265d;
Hiệp sĩ đen	♞	♞	& # x265e;
Cầm đồ đen	♟	♟	& # x265f;

Toán học

vô cực	∞	∞	& # x221e;
Cộng trừ	±	±	& # xb1;
Ít hơn hoặc bằng	≤	≤	& # x2264;
Nhiều hơn hoặc bằng	≥	≥	& # x2265;
Không bằng	≠	≠	& # x2260;
Phân công	÷	÷	& # xf7;
Phép nhân x	×	×	& # xd7;
Phép nhân nặng x	✖	✖	& # x2716;
Chỉ số một	¹	¹	& # xb9;
Chỉ số hai	²	²	& # xb2;
Chỉ số ba	³	³	& # xb3;
Circled Plus	⊕	⊕	& # x2295;
Phép nhân vòng tròn	⊗	⊗	& # x2297;
Logic AND	∧	∧	& # x2227;
Lôgic HOẶC	∨	∨	& # x2228;
Đồng bằng	∆	∆	& # x2206;
Bánh	∏	∏	& # x220f;
Sigma (SUM)	∑	∑	& # x2211;
Omega	Ω	Ω	& # x3a9;
Bộ trống	∅	∅	& # x2205;
Góc	∠	∠	& # x2220;
Song song, tương đông	∥	∥	& # x2225;
Vuông góc	⊥	⊥	& # x22a5;
Gần như bằng	≈	≈	& # x2248;
Tam giác	△	△	& # x25b3;
Vòng tròn	○	○	& # x25CB;
Vuông	□	□	& # x25A1;

Phân số

Một phần tư (1/4)	¼	¼	& # xbc;
Một nửa (1/2)	½	½	& # xbd;
Ba phần tư (3/4)	¾	¾	& # xbe;
Một phần ba (1/3)	⅓	⅓	& # x2153;
Hai phần ba (2/3)	⅔	⅔	& # x2154;
Một tám (1/8)	⅛	⅛	& # x215b;
Three Eights (3/8)	⅜	⅜	& # x215c;
Five Eights (5/8)	⅝	⅝	& # x215d;
Seven Eights (7/8)	⅞	⅞	& # x215e;

Chữ số La mã

Một số La Mã	Ⅰ	Ⅰ	& # x2160;
Số La Mã Hai	Ⅱ	Ⅱ	& # x2161;
Số Ba La Mã	Ⅲ	Ⅲ	& # x2162;
Bốn số La Mã	Ⅳ	Ⅳ	& # x2163;
Số năm La Mã	Ⅴ	Ⅴ	& # x2164;
Số sáu La Mã	Ⅵ	Ⅵ	& # x2165;
Số Bảy La Mã	Ⅶ	Ⅶ	& # x2166;
Số tám La Mã	Ⅷ	Ⅷ	& # x2167;
Số Chín La Mã	Ⅸ	Ⅸ	& # x2168;
Số Mười La Mã	Ⅹ	Ⅹ	& # x2169;
Số Mười Một La Mã	Ⅺ	Ⅺ	& # x216a;
Số Mười Hai La Mã	Ⅻ	Ⅻ	& # x216b;

Một vài lưu ý

Có một số khác biệt về kết xuất giữa các biểu tượng này trên các biểu tượng hoạt động. Điều này là do các họ phông chữ khác nhau được sử dụng. Ngoài ra, iOS và Android thay thế một số ký tự Unicode bằng biểu tượng cảm xúc, vì vậy hãy nhớ kiểm tra ở đó để đảm bảo rằng điều này không xảy ra và các biểu tượng hiển thị như dự kiến. Chúc bạn viết mã vui vẻ! :)

Bài viết này đã giúp ích cho bạn?

Hệ thống biểu tượng biểu tượng

Bài viết mới

Bài trước Bài tiếp