CSS3 Social Media Icons - CSS3 biểu tượng Social Media

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,625
Được Like
12,670
CSS3 Social Media Icons - CSS3 biểu tượng Social Media

CSS3 Social Media Icons là các biểu tượng mạng xã hội mà bạn có thể đặt bất cứ nơi nào trên trang web của bạn nhưng với mục đích của tài liệu này, chúng tôi sẽ đặt chúng ở phía trên bên phải header của bạn. Những biểu tượng không phải là tệp hình ảnh nhưng đơn giản chỉ là tùy chỉnh font và CSS padding làm cho giống như biểu tượng mạng xã hội. Điều này có nghĩa là khi bạn phóng to các biểu tượng hoặc nhìn từ một màn hình có độ phân giải cao, nó sẽ được sắc nét và sạch sẽ không có vấn đề gì kích thước. Nó có thể không làm việc trong tất cả các trình duyệt.

SocialMediaIcons3.jpg


SocialMediaIcons4.jpg

Bước 1: Tải các nút CSS Social Media ở đây: http://medialoot.com/item/css-social-media-buttons/

Bước 2: Vào: http://createcss3.com/ kiểm tra @font-face section và browse cho tập tin socialglyphs-webfont.tff phía trong folder font đó là bên trong thư mục social media icons. Upload và lưu những gì họ cung cấp cho bạn về máy tính của bạn.


Bước 3: Giải nén tập tin socialglyphs-webfont.zip và upload folder phía trong gọi là fonts lên thư mục gốc nơi cài đặt Xenforo của bạn.

Bước 4: Vào AdminCP/Appearance/Styles/Templates
Mở template: logo_block
Đặt mã html của các nút CSS bạn muốn trên hook header_logo. Hãy chắc chắn rằng bạn thay thế các liên kết sau đây với các liên kết trang web của riêng bạn. Ví dụ.
Mã:
<a href="https://plus.google.com/" class="google" target="_blank" title="Google"></a>
<a href="http://www.linkedin.com/" class="linkedin" target="_blank" title="LinkedIn"></a>
<a href="https://facebook.com/" class="fbook" target="_blank" title="Facebook"></a>
<a href="http://twitter.com/" class="twitt" target="_blank" title="Twitter"></a>
</xen: hook>

Bước 5: Vào AdminCP/Appearance/Styles/Templates
Mở template: EXTRA.CSS và thêm:
Mã:
@font-face {
    font-family: 'Conv_socialglyphs-webfont';
    src: url('fonts/socialglyphs-webfont.eot');
    src: local('☺'), url('fonts/socialglyphs-webfont.woff') format('woff'), url('fonts/socialglyphs-webfont.ttf') format('truetype'), url('fonts/socialglyphs-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
a:link { opacity: 1; }
a:hover { opacity: 0.9;}
a:active { opacity: 0.75; }
.google {
    display: block;
    text-decoration: none;
    float: right;
    color: white;
    margin-left:3px;
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.5;
    text-align: center;
    text-shadow:0px -1px 0px rgba(0,0,0,0.35);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true);
    background-color: #404040;
    background-image:-moz-linear-gradient(50% 0% -90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(81,81,81)),color-stop(1, rgb(53,53,53)));
    background-image:-webkit-linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:-o-linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:-ms-linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff515151,endColorstr=#ff353535,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff515151,endColorstr=#ff353535,GradientType=0);
}
.google:after {
    content: "C";
    color: white;
}
.linkedin {
    display: block;
    text-decoration: none;
    float: right;
    color: white;
    margin-left:3px;
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    text-align: center;
    font-size:15px;
    line-height:1.2;
    text-shadow:0px -1px 0px rgba(0,0,0,0.35);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true);
    background-color: #4B9DCA;
    background-image:-moz-linear-gradient(50% 0% -90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(99,170,209)),color-stop(1, rgb(54,145,196)));
    background-image:-webkit-linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:-o-linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:-ms-linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff63aad1,endColorstr=#ff3691c4,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff63aad1,endColorstr=#ff3691c4,GradientType=0);
}
.linkedin:after {
    content: "E";
    color: white;
}
.fbook {
    display: block;
    text-decoration: none;
        float: right;
        color: white;
        margin-left:3px;
        height: 20px;
        width: 20px;
        font-family: 'Conv_socialglyphs-webfont';
        font-size: 19px;
        line-height: 1.2;
        text-align: left;
        background-color: #5D83BA;
        background-image:-moz-linear-gradient(50% 0% -90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(113,146,194)),color-stop(1, rgb(72,115,177)));
        background-image:-webkit-linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:-o-linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:-ms-linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
        text-decoration: none;
        text-indent: 8px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
        -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
        box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7192c2,endColorstr=#ff4873b1,GradientType=0)";
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7192c2,endColorstr=#ff4873b1,GradientType=0);
}
.fbook:after {
    content: "A";
    color: white;
}
.twitt {
    display: block;
    text-decoration: none;
    float: right;
    color: white;
    margin-left:3px;
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.3;
    text-align: center;
    text-shadow:0px -1px 0px rgba(0,0,0,0.35);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true);
    background-color: #37afd7;
    background-image:-moz-linear-gradient(50% 0% -90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(109,197,226)),color-stop(1, rgb(7,156,206)));
    background-image:-webkit-linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:-o-linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:-ms-linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6dc5e2,endColorstr=#ff079cce,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6dc5e2,endColorstr=#ff079cce,GradientType=0);
}
.twitt:after {
    content: "B";
        color: white;
}

Bước 6: Vào AdminCP/Appearance/Styles/Templates
Mở template: login_bar.css

Tìm #loginBar #loginBarHandle

Thay đổi margin-right: 20px; thành margin-right: 100px;

và bạn đã hoàn tất.

(Không bắt buộc)

Bước 7: Để thêm các biểu tượng chỉ cần nhìn vào các tập tin CSS và html trong file đầu tiên bạn tải về. Sao chép và dán html vào logo_block, làm cho một số CSS để phù hợp với các nút đã được thêm vào trong EXTRA.css và đừng quên tăng margin-right của login_bar.css và tài khoản cho các nút bạn đã thêm.

Bước 8: Để thay đổi kích thước hình ảnh và văn bản (biểu tượng) chơi xung quanh với một phần của mã CSS cho mỗi biểu tượng.
Mã:
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.5;
    text-align: center;

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Top Bottom