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.
Cách chèn liên kết Iconfont Icons
Chèn liên kết trong <head></head>
<link href="https://doannguyennet.github.io/iconsfont/iconfont.css" rel="stylesheet"/>
Hoặc
<link href="https://doannguyennet.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ả các biểu tượng Iconfont Icons
| Icon | Value | Content |
| 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" | |
| icon-speakers | "\ea3d" | |
| icon-stats | "\ea3e" | |
| icon-stats-1 | "\ea3f" | |
| icon-stats-2 | "\ea40" | |
| icon-stats-3 | "\ea41" | |
| icon-stats-4 | "\ea42" | |
| icon-stats-5 | "\ea43" | |
| icon-stats-6 | "\ea44" | |
| icon-sticky-note | "\ea45" | |
| icon-store | "\ea46" | |
| icon-store-1 | "\ea47" | |
| icon-suitcase | "\ea48" | |
| icon-suitcase-1 | "\ea49" | |
| icon-tag | "\ea4a" | |
| icon-target | "\ea4b" | |
| icon-team | "\ea4c" | |
| icon-tie | "\ea4d" | |
| icon-trash | "\ea4e" | |
| icon-trolley | "\ea4f" | |
| icon-trolley-1 | "\ea50" | |
| icon-trolley-2 | "\ea51" | |
| icon-trophy | "\ea52" | |
| icon-truck | "\ea53" | |
| icon-truck-1 | "\ea54" | |
| icon-truck-2 | "\ea55" | |
| icon-umbrella | "\ea56" | |
| icon-upload | "\ea57" | |
| icon-user | "\ea58" | |
| icon-user-1 | "\ea59" | |
| icon-user-2 | "\ea5a" | |
| icon-user-3 | "\ea5b" | |
| icon-users | "\ea5c" | |
| icon-video-camera | "\ea5d" | |
| icon-voucher | "\ea5e" | |
| icon-voucher-1 | "\ea5f" | |
| icon-voucher-2 | "\ea60" | |
| icon-voucher-3 | "\ea61" | |
| icon-voucher-4 | "\ea62" | |