- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,687
Font Awesome Navbar Icons trước Navigation-Links với CSS
Navbar Icons
Trước
Sau
1. Cài đặt Font Awesome
Vào: ACP > Appearance > Templates > PAGE_CONTAINER
Tìm:
Thêm vào sau:
2. Thêm các Icon (trong trường hợp này cho Forums)
Vào: ACP > Appearance > Templates > EXTRA.css
Thêm:
Làm thế nào để thêm các icon cho các tab khác:
Mỗi tab có .class của riêng mình, chẳng hạn như .forums cho tab Forums. Để thêm một icon bạn cần phải biết .class cho tab cụ thể và thay thế mỗi ".forum" với .class cụ thể trong đoạn code trên.
Sau đây là một danh sách các .class cho các tab cụ thể:
Bạn có thể thay đổi các icon bằng cách chỉnh sửa code trong phần này:
Mỗi item có một giá trị cụ thể. Bạn có thể tìm thấy tất cả các giá trị ở đây.
Để chọn các icon bên phải bạn có thể so sánh với danh sách ở đây.
Sau đây là một danh sách gợi ý các giá trị icon:
Chúc các bạn thành công.
Navbar Icons
Trước
Sau
Vào: ACP > Appearance > Templates > PAGE_CONTAINER
Tìm:
Mã:
<head>Thêm vào sau:
Mã:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">2. Thêm các Icon (trong trường hợp này cho Forums)
Vào: ACP > Appearance > Templates > EXTRA.css
Thêm:
Mã:
/*=Font Awesome Icon: Forums=*/
.navTabs .navTab.forums .navLink:before
{
display: block !important;
font-family: FontAwesome;
position: absolute;
top: 0 px;
left: 5px;
border-left: none;
/*--icon to display--*/
content: "\f03a";
/*--icon color--*/
color: #FFF;
/*--icon size--*/
font-size: 17px;
}
/*--icon color if tab is selected--*/
.navTabs .navTab.forums.selected .navLink:before {color: #FFF;}
/*--icon color if mouse is hovered--*/
.navTabs .navTab.forums:hover .navLink:before {color: #FFF;}
/*--adjust the px relative to the icon size--*/
.navTabs .navTab.forums .navLink { padding-left: 28px; }Làm thế nào để thêm các icon cho các tab khác:
Mỗi tab có .class của riêng mình, chẳng hạn như .forums cho tab Forums. Để thêm một icon bạn cần phải biết .class cho tab cụ thể và thay thế mỗi ".forum" với .class cụ thể trong đoạn code trên.
Sau đây là một danh sách các .class cho các tab cụ thể:
- Donation Manager: .donations
- Forums: .forums
- Home: .home
- Members: .members
- Showcase: .showcase
- TaigaChat: .taigachat
- XenGallery: .xengallery
Bạn có thể thay đổi các icon bằng cách chỉnh sửa code trong phần này:
Mã:
/*--icon to display--*/
content: "\f03a";Mỗi item có một giá trị cụ thể. Bạn có thể tìm thấy tất cả các giá trị ở đây.
Để chọn các icon bên phải bạn có thể so sánh với danh sách ở đây.
Sau đây là một danh sách gợi ý các giá trị icon:
- Donation Manager: \f153
- Forums: \f03a
- Home: \f015
- Members: \f153
- Showcase: \f0f6
- TaigaChat: \f086
- XenGallery: \f03e
Chúc các bạn thành công.
Nguồn: xenforo.com
Bài viết liên quan
User Name css
bởi Wadd,
