- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Font Awesome Icons behind Links - Thêm biểu tượng Font Awesome đằng sau liên kết
Điều này sẽ thêm một số biểu tượng đằng sau các liên kết bên ngoài và nội bộ.
Bạn có thể tìm thêm thông tin về các font chữ được sử dụng trên trang web của họ: http://fontawesome.io/
Ví dụ:
1. Vào template PAGE_CONTAINER và thêm đoạn code dưới đây vào sau <head>:
Với TMS cài đặt, thêm một template modification mới (admin.php?template-modifications/add):
Template: PAGE_CONTAINER
Tìm:
Thay thế bằng:
2. Bây giờ bạn có thể thêm những dòng sau vào template EXTRA.CSS:
External Links:
External Links khác:
Internal Links/Add-Ons:
Resource Manager
Add-On khác:
Cách giải quyết do một số liên kết nội bộ (exthreads/.1) được xử lý như các liên kết bên ngoài:
Chúc các bạn thành công.
Điều này sẽ thêm một số biểu tượng đằng sau các liên kết bên ngoài và nội bộ.
Bạn có thể tìm thêm thông tin về các font chữ được sử dụng trên trang web của họ: http://fontawesome.io/
Ví dụ:
Mã:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
Với TMS cài đặt, thêm một template modification mới (admin.php?template-modifications/add):
Template: PAGE_CONTAINER
Tìm:
Mã:
<link rel="stylesheet" href="css.php?css=xenforo,form,public&style={xen:urlencode $_styleId}&dir=
{$visitorLanguage.text_direction}&d={$visitorStyle.last_modified_date}" />
Thay thế bằng:
Mã:
<link rel="stylesheet" href="css.php?css=xenforo,form,public&style={xen:urlencode $_styleId}&dir=
{$visitorLanguage.text_direction}&d={$visitorStyle.last_modified_date}" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
2. Bây giờ bạn có thể thêm những dòng sau vào template EXTRA.CSS:
External Links:
Mã:
.messageText .externalLink:after{content:"\00a0\f08e";font-family:FontAwesome;}
External Links khác:
Mã:
.messageText .externalLink[href*="dropbox.com"]:after{content: "\00a0\f16b";font-family: FontAwesome;}
.messageText .externalLink[href*="facebook.com"]:after{content: "\00a0\f082";font-family: FontAwesome;}
.messageText .externalLink[href*="plus.google.com"]:after{content: "\00a0\f0d4";font-family: FontAwesome;}
.messageText .externalLink[href*="twitter.com"]:after{content: "\00a0\f081";font-family: FontAwesome;}
.messageText .externalLink[href*="github.com"]:after{content: "\00a0\f09b";font-family: FontAwesome;}
.messageText .externalLink[href*="youtube.com"]:after{content: "\00a0\f16a";font-family: FontAwesome;}
.messageText .externalLink[href*="vimeo.com"]:after{content: "\00a0\f194";font-family: FontAwesome;}
.messageText .externalLink[href*="instagram.com"]:after{content: "\00a0\f16d";font-family: FontAwesome;}
Internal Links/Add-Ons:
Resource Manager
Mã:
.messageText .internalLink[href*="YOUR-DOMAIN.COM/resources"]:after{content: "\00a0\f019";font-family: FontAwesome;}
Add-On khác:
Mã:
.messageText .internalLink[href*="YOUR-DOMAIN.COM/gallery"]:after{content: "\00a0\f03e";font-family: FontAwesome;}
.messageText .internalLink[href*="YOUR-DOMAIN.COM/showcase"]:after{content: "\00a0\f03e";font-family: FontAwesome;}
.messageText .internalLink[href*="YOUR-DOMAIN.COM/media"]:after{content: "\00a0\f16a";font-family: FontAwesome;}
Cách giải quyết do một số liên kết nội bộ (exthreads/.1) được xử lý như các liên kết bên ngoài:
Mã:
.messageText .internalLink[href*="YOUR-DOMAIN.COM"]:after{content: "";font-family: FontAwesome;}
Chúc các bạn thành công.
Nguồn: xenforo.com
Bài viết liên quan
Bài viết mới