Làm dạng font Awesome cho các nút xã hội Social

Ngày nay không có một trang web hay blog nào mà không dùng đến Social, chúng là một trong những phương thức thao tác giúp người sử dụng có thể liên kết để tương tác xã hội một cách tốt nhất và nhanh nhất, tiện dụng nhất.

Tuy nhiên không phải một trang thông tin nào khi đặt Social lên cũng giúp thiết kế của tổng thể trang được đẹp hơn, đôi lúc còn có thể làm trang web xấu đi hoặc không tiện dụng. Sau đây Win Blog chia sẻ một vài thủ thuật giúp các bạn có được những nút Social đúng chuẩn CSS và gọn gàng hơn.

Đầu tiên chúng ta định nghĩa Font Awesome là gì ?
Font Awesome là một trong những định dạng chuẩn của một chữ hay hình tượng xã hội, mà khi đó bạn có thể điều chỉnh CSS của nó với hơn 500 biểu tượng khác nhau.

Và Awesome có thể giúp điều gì ?
* Đầu tiên nó có rất nhiều bộ sưu tập khác nhau của hình tượng xã hội.
* Hỗ trợ CSS : có thể điều chỉnh CSS, màu sắc, kích cỡ nhanh chóng.
* Tốc độ load trang web được cải thiện đáng kể.
* Miễn phí : bạn không cần trả một chi phí nào cho nó cả.

Các bước để chèn một Social vào blog của bạn :

Bước 1 : tải Font Awesome từ trang web chính thức :
Download Font Awesome
Nhấn vào Dowload để tải về nhé.

Bước 2 : Upload toàn bộ các file bạn dowload về lên trang Google Drive:
Hướng dẫn ở đây.

Bước 3:
Sau đó dùng link CSS ở Google Drive để đưa vào trang mã Code blogspot.
Hoặc đơn giản hơn đó là các bạn có thể dùng trực tiếp :
Tìm và thêm dòng sau ở dưới mã <head> trong edit code của Blog :

<Link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Bước 4: bắt đầu với Font Awesome nhé
Điều đầu tiên bạn hãy xóa toàn bộ các Social có sẵn trong blog của bạn, kẻo trùng lặp thì không hay lắm nhé.
Sau đó copy một đoạn mẫu Code chuẩn sau vào phần thiết kế mà bạn muốn thêm trên Blog của bạn (tất nhiên bạn đã định hình trước nó phải nằm ở đầu rồi nhé )

<div id = "fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow">   </ a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow">   </a>
< a href = "URL HERE" title = "Twitter" target = "_ blank" rel = "nofollow">   </a>
<a href = "URL- HERE "title =" Pinterest "target =" _ blank "rel =" nofollow ">   </a>
<a href =" URL HERE "title =" Instagram "target =" _ blank "rel =" nofollow ">   </a>
<a href =" URL HERE "title =" Bloglovin "target =" _ blank " rel = "nofollow">   </a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow">   </a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow">   </a>
</ div>

Bước 5: phân tích đoạn mã ở trên chúng ta thấy có 8 loại Social xã hội khác nhau, nếu bạn không thích các Social nào thì có thể xóa dòng đó đi nhé.

URL-HERE là link trang xã hội mà bạn muốn link tới.

Bước 6: hãy trang trí nút Social đó bằng CSS nhé

Tìm <b:skin> và thêm các mẫu code CSS sau ở dưới nó nhé:

Code mẫu chuẩn :

#fawesomeicons a { font-size: 16px; width: 30px; height: 30px; line-height: 30px; }

1. Mẫu vuông xanh :

#fawesomeicons { text-align: center; } #fawesomeicons a { background: # background-color ; color: # font-màu ; display: inline-block; font-size: 16px; width: 30px; height: 30px; line- height: 30px; margin: 0 1px 6px; } #fawesomeicons a: hover { background: # hover màu ; }

2. Mẫu tròn xanh :

#fawesomeicons { text-align: center; } #fawesomeicons a { background: # background-color ; color: # font-màu ; display: inline-block; font-size: 16px; width: 30px; height: 30px; line- height: 30px; margin: 0 1px 6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #fawesomeicons a: hover { background: # hover màu ; }

3. Mẫu vuông trong suốt :

#fawesomeicons { text-align: center; } #fawesomeicons a { border: 1px solid # border-color ; color: # font-màu ; display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; margin: 0 1px 6px; } #fawesomeicons a: hover { background: # hover màu ; }

4. Mẫu tròn trong suốt :

#fawesomeicons { text-align: center; } #fawesomeicons a { border: 1px solid # border-color ; color: # font-màu ; display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; margin: 0 1px 6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #fawesomeicons a: hover { background: #hover màu ; }

5. Mẫu biểu tượng:

#fawesomeicons { text-align: center; } #fawesomeicons a { color: # font-màu ; display: inline-block; font-size: 23 pixel; margin: 0 6px 6px; } #fawesomeicons a: hover { background: #hover màu ; }

Bước 7 : hãy đưa css đó vào nút xã hội mà bạn muốn bằng các đoạn code đơn giản sau, phía dưới các mẫu CSS mà bạn chọn ở bước 6 :

#fawesomeicons a .fa-facebook {background: #background-color;color: #font-màu;} #fawesomeicons a .fa-twitter {background: #background-color;color: #font-màu;}

* Lưu ý :

Các bạn có thể chỉnh font to hơn hoặc màu sắc trong CSS nhé :

#font-màu (là màu sắc font chữ )

#background-color : là màu sắc nền của biểu tượng xã hội.

.fa-facebook : là mã code quy định đối với mỗi loại Social, các bạn có thể thay đổi bằng các mã fa khác nhé.

Nếu có thắc mắc , xin liên hệ Win Blog để được giải đáp ngay nhé.

Win Blog