Font Awesome Icons behind Links - Thêm biểu tượng Font Awesome đằng sau liên kết

Admin

Administrator
Thành viên BQT
#1
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ụ:

examples.png

1. Vào template PAGE_CONTAINER và thêm đoạn code dưới đây vào sau <head>:
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&amp;style={xen:urlencode $_styleId}&amp;dir=

{$visitorLanguage.text_direction}&amp;d={$visitorStyle.last_modified_date}" />
Thay thế bằng:
Mã:
<link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;dir=

{$visitorLanguage.text_direction}&amp;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​
 
Top