Danh sách đầy đủ các biểu tượng Iconfont icons với giá trị content css

Edit this article 0

Complete list of Iconfont icons icons with their CSS content values: Danh sách đầy đủ các biểu tượng Iconfont icons với giá trị content css và hướng dẫn sử dụng

Iconfont Icons là một phông chữ web của trang nào thiết kế mà mình search Google chưa ra. Trong thiết kế, các biểu tượng Iconfont Icons được sử dụng với phần tử <i>, bạn có thể muốn sử dụng các biểu tượng này với giá trị content trong css. Để làm như vậy, bạn sẽ cần sử dụng các giá trị content sau trên phần tử mong muốn và sau đó thay thế giá trị cho biểu tượng có liên quan.

Danh sách đầy đủ các biểu tượng Iconfont icons với giá trị content css
Cách chèn liên kết Iconfont Icons

Chèn liên kết trong <head></head>

<link href="https://thietkeblogspot.github.io/iconsfont/iconfont.css" rel="stylesheet"/>

Hoặc

<link href="https://thietkeblogspot.github.io/iconsfont/iconfont.min.css" rel="stylesheet"/>

Cách này áp dụng cho biểu tượng trực tiếp và giá trị content css

Cách áp dụng biểu tượng phần tử <i>

Ví dụ:

   <i class="icon icon-consult"></i>

Cách sử dụng giá trị content css


.element:before, .element:after {
    font-family: 'iconfont';
    content: "Giá trị";
    font-size: 20px;
    color: #707070;
}

Ví dụ:


a.parmalink:after {
    font-family: 'iconfont';
    content: "\ea7b";
    font-size: 20px;
    color: #707070;
    position: absolute;
    right: 5px;
}

Lưu ý: Các giá trị content bắt đầu bằng chữ e bao gồm 4 ký tự và đứng sau ký tự \, ví dụ "\e84d"

Danh sách đầy đủ tất cả biểu tượng Iconfont Icons

IconValueContent
icon-balloon"\ea7b"
icon-community"\ea7c"
icon-employee"\ea7d"
icon-family"\ea7e"
icon-graphic-3"\ea7f"
icon-love"\ea80"
icon-travel"\ea81"
icon-abacus2"\e944"
icon-abacus"\e945"
icon-agenda"\e946"
icon-agenda2"\e993"
icon-agenda-1"\e994"
icon-alarm-clock2"\e995"
icon-alarm-clock"\e996"
icon-atomic"\e997"
icon-auction"\e998"
icon-balance"\e999"
icon-balance2"\e99a"
icon-bank"\e99b"
icon-bar-chart"\e99c"
icon-barrier"\e99d"
icon-battery"\e99e"
icon-battery-1"\e99f"
icon-bell"\e9a0"
icon-bluetooth"\e9a1"
icon-book"\e9a2"
icon-briefcase"\e9a3"
icon-briefcase-1"\e9a4"
icon-briefcase-2"\e9a5"
icon-calculator"\e9a6"
icon-calculator2"\e9a7"
icon-calculator-1"\e9a8"
icon-calendar"\e9a9"
icon-calendar2"\e9aa"
icon-calendar-1"\e9ab"
icon-car"\e9ac"
icon-carrier"\e9ad"
icon-cash"\e9ae"
icon-chat"\e9af"
icon-chat-1"\e9b0"
icon-checked"\e9b1"
icon-clip"\e9b2"
icon-clip2"\e9b3"
icon-clipboard2"\e9b4"
icon-clipboard"\e9b5"
icon-clock"\e9b6"
icon-clock-1"\e9b7"
icon-cloud"\e9b8"
icon-cloud-computing"\e9b9"
icon-cloud-computing-1"\e9ba"
icon-cogwheel"\e9bb"
icon-coins "\e9bc"
icon-compass"\e9bd"
icon-contract"\e9be"
icon-conversation"\e9bf"
icon-crane"\e9c0"
icon-crane-2"\e9c1"
icon-credit-card2"\e9c2"
icon-credit-card"\e9c3"
icon-cursor"\e9c4"
icon-customer-service"\e9c5"
icon-cutlery"\e9c6"
icon-dart-board"\e9c7"
icon-decision-making"\e9c8"
icon-desk-chair"\e9c9"
icon-desk-lamp"\e9ca"
icon-diamond"\e9cb"
icon-direction"\e9cc"
icon-document"\e9cd"
icon-dollar-bill"\e9ce"
icon-download"\e9cf"
icon-edit"\e9d0"
icon-email"\e9d1"
icon-envelope2"\e9d2"
icon-envelope"\e9d3"
icon-eraser"\e9d4"
icon-eye"\e9d5"
icon-factory"\e9d6"
icon-fast-forward"\e9d7"
icon-favorites"\e9d8"
icon-file"\e9d9"
icon-file-1"\e9da"
icon-file-2"\e9db"
icon-file-3"\e9dc"
icon-filter"\e9dd"
icon-Insurex-book"\e9de"
icon-flag"\e9df"
icon-folder"\e9e0"
icon-folder-1"\e9e1"
icon-folders"\e9e2"
icon-folders2"\e9e3"
icon-gamepad"\e9e4"
icon-gift"\e9e5"
icon-growth"\e9e6"
icon-heart"\e9e7"
icon-home"\e9e8"
icon-house"\e9e9"
icon-house-1"\e9ea"
icon-house-2"\e9eb"
icon-id-card2"\e9ec"
icon-id-card"\e9ed"
icon-id-card-1"\e9ee"
icon-idea"\e9ef"
icon-image"\e9f0"
icon-improvement"\e9f1"
icon-inbox"\e9f2"
icon-information"\e9f3"
icon-key2"\e9f4"
icon-key"\e9f5"
icon-laptop"\e9f6"
icon-layers"\e9f7"
icon-light-bulb"\e9f8"
icon-like"\e9f9"
icon-line-chart"\e9fa"
icon-loupe"\e9fb"
icon-mail"\e9fc"
icon-manager"\e9fd"
icon-map"\e9fe"
icon-medal"\e9ff"
icon-megaphone"\ea00"
icon-megaphone2"\ea01"
icon-message"\ea02"
icon-message-1"\ea03"
icon-message-2"\ea04"
icon-microphone"\ea05"
icon-money"\ea06"
icon-money-bag"\ea07"
icon-monitor"\ea08"
icon-music"\ea09"
icon-next"\ea0a"
icon-open-book"\ea0b"
icon-padlock"\ea0c"
icon-padlock-1"\ea0d"
icon-paint-brush"\ea0e"
icon-pause"\ea0f"
icon-pen"\ea10"
icon-pencil"\ea11"
icon-percentage"\ea12"
icon-phone-call2"\ea13"
icon-phone-call"\ea14"
icon-photo-camera"\ea15"
icon-pie-chart"\ea16"
icon-pipe"\ea17"
icon-placeholder"\ea18"
icon-placeholder2"\ea19"
icon-planet-earth"\ea1a"
icon-play-button"\ea1b"
icon-power-button"\ea1c"
icon-presentation2"\ea1d"
icon-presentation"\ea1e"
icon-printer"\ea1f"
icon-push-pin2"\ea20"
icon-push-pin"\ea21"
icon-refresh"\ea22"
icon-reload"\ea23"
icon-return"\ea24"
icon-rocket-ship"\ea25"
icon-rss"\ea26"
icon-safebox"\ea27"
icon-safebox2"\ea28"
icon-search2"\ea29"
icon-search-1"\ea2a"
icon-settings"\ea2b"
icon-settings-1"\ea2c"
icon-settings-2"\ea2d"
icon-sewing-machine"\ea2e"
icon-share"\ea2f"
icon-shield"\ea30"
icon-shield2"\ea31"
icon-shopping"\ea32"
icon-shopping-bag"\ea33"
icon-shopping-bag-1"\ea34"
icon-shopping-bag-2"\ea35"
icon-shopping-cart"\ea36"
icon-shopping-cart2"\ea37"
icon-shopping-cart-1"\ea38"
icon-shopping-cart-2"\ea39"
icon-shopping-cart-3"\ea3a"
icon-smartphone"\ea3b"
icon-speaker"\ea3c"

0 Nhận xét