Bài viết mô tả các cách phổ biến nhất để thêm các biểu tượng mạng xã hội vào trang web HTML của bạn – dưới dạng hình ảnh, sử dụng phông chữ hoặc plugin biểu tượng.

Bạn đang xem : cách hiển thị các biểu tượng mạng xã hội trên trang web

Thêm các biểu tượng mạng xã hội vào trang web của bạn là một cách hay để tạo kết nối với khách hàng của bạn thông qua mạng xã hội, nhận phản hồi của họ một cách thân mật và lôi cuốn họ vào cuộc sống của công ty bạn.

Cần một số ý tưởng trực quan hóa dữ liệu thú vị? Trang trình bày PPT sẽ hoàn thành công việc.

Cách thêm biểu tượng mạng xã hội trong HTML

Có nhiều cách để thêm các biểu tượng mạng xã hội vào trang web của bạn:

  • Thêm các biểu tượng dưới dạng hình ảnh ở định dạng mong muốn – .png, .svg hoặc .eps.
  • Thêm chúng bằng cách sử dụng các phông chữ biểu tượng – FontAwesome, Glyphicons, v.v.
  • Triển khai các biểu tượng bằng tiện ích WP.
  • Thêm các biểu tượng truyền thông xã hội thông qua plugin WP.

Bạn có thể chọn một cái phù hợp nhất với mình hoặc thử tất cả chúng.

Thêm biểu tượng xã hội dưới dạng hình ảnh (PNG, SVG, EPS, v.v.)

Nếu bạn là nhà thiết kế, bạn có thể tự tạo hoặc tùy chỉnh các biểu tượng. Nhưng nếu không hoặc chỉ muốn tiết kiệm thời gian, bạn có thể sử dụng nhiều dịch vụ mà bạn có thể chọn các gói biểu tượng và tải chúng xuống. Phổ biến nhất là:

vecteezy

Chọn gói biểu tượng phù hợp nhất với yêu cầu của bạn và tải xuống.

Sau đó, tải các tệp lên thư viện phương tiện của bạn và thêm chúng theo cách sau (đối với các trang web HTML):

Xem Bút
SMIcons5
bởi Helen ( @ CF-251 )
trên CodePen .

Và thêm một số kiểu để điều chỉnh kích thước và vị trí của các biểu tượng:

  .social-icon {
  text-align: center;
  }
.social-icon li {
  display: inline-block;
  list-style-type: none;
  -webkit-user-select: none;
  -moz-user-select: không có;
  }
.social-icon li a {
  border-bottom: không có;
  }
.social-icon li img {
  chiều rộng: 70px;
  chiều cao: 70px;
  margin-right: 20px;
}  

Thêm các biểu tượng vào bộ sưu tập của bạn, tải chúng xuống và

kết hợp chúng

vào mã của bạn

trong

theo cùng một cách

như

trường hợp trước.

iconfinder

Bạn cũng có thể tìm thấy nhiều gói biểu tượng xã hội miễn phí tại đây. Chỉ cần tìm phong cách phù hợp với sở thích của bạn hơn, thêm chúng vào khối xã hội của bạn và tận hưởng mức độ phổ biến ngày càng tăng trên các mạng xã hội!

Có một cách để áp dụng các biểu tượng xã hội dưới dạng hình ảnh SVG. Chỉ cần xem các ví dụ sau để biết cách bạn có thể tùy chỉnh chúng:

Xem Bút
SMIcons5
bởi Helen ( @ CF-251 )
trên CodePen .

Xem Bút
SMicons6
bởi Helen ( @ CF-251 )
trên CodePen .

Thêm biểu tượng xã hội làm phông chữ biểu tượng | Các nút mạng xã hội html

FontAwesome có lẽ là phông chữ biểu tượng phổ biến nhất hiện nay. Nó cực kỳ dễ triển khai và sử dụng. Hãy xem một ví dụ.

Xem Thêm  Căn giữa một biểu mẫu trong HTML - biểu mẫu trung tâm trong html

Thêm mã này vào HTML của bạn:

  & lt; link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome. min.css "& gt;
& lt; div class = "wrapper" & gt;
& lt; a target = "_ blank" href = "your_url_here" & gt; & lt; i class = "fa fa-3x fa-google-plus" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a target = "_ blank" href = "your_url_here" & gt; & lt; i class = "fa fa-3x fa-facebook-square" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; a target = "_ blank" href = "your_url_here" & gt; & lt; i class = "fa fa-3x fa-twitter-square" & gt; & lt; / i & gt;
& lt; / div & gt; & lt; / a & gt;  

Thêm các kiểu vào tệp style.css của bạn (bạn có thể thêm kiểu của riêng mình hoặc sử dụng ví dụ này):

 body {
   text-align: center;
 }
.vỏ bánh {
hiển thị: inline-flex;
justify-content: trung tâm;
}
.wrapper tôi {
đệm: 10px;
text-shadow: 0px 6px 8px rgba (0, 0, 0, 0.6);
chuyển tiếp: tất cả 150ms dễ dàng vào-ra;
}
.wrapper a: nth-child (1) {
màu: # dd4b39;
}
.wrapper a: nth-child (2) {
màu: # 4867AA;
}
.wrapper a: nth-child (3) {
màu: # 1DA1F2;
}
.wrapper i: hover {
margin-top: -3px; text-shadow: 0px 14px 10px rgba (0, 0, 0, 0.4);
}  

Và đây là cách nó hoạt động:

Xem Bút
SMIcons7
bởi Helen ( @ CF-251 )
trên CodePen .

Nhân tiện, bạn có thể tìm thấy tất cả các biểu tượng khác trong FontAwesome Cheatsheet .

Ví dụ về cách triển khai:

Xem Bút
SMIcons1
bởi Helen ( @ CF-251 )
trên CodePen .

Xem Bút
SMIcons2
bởi Helen ( @ CF-251 )
trên CodePen .

Xem Bút
SMIcons3
bởi Helen ( @ CF-251 )
trên CodePen .

Socicon

Một cách khác là sử dụng phông chữ biểu tượng Socicon.

Truy cập trang web:

  & lt; link rel = "stylesheet" href = "https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8" & gt;
& lt; ul class = "socicons-list" & gt;
     & lt; li & gt;
       & lt; a href = 'your_url_here' target = '_ blank' & gt; & lt; span class = "socicon-facebook" & gt; & lt; / span & gt; & lt; / a & gt;
      & lt; / li & gt;
       & lt; li & gt;
       & lt; a href = 'your_url_here' target = '_ blank' & gt; & lt; span class = "socicon-instagram" & gt; & lt; / span & gt; & lt; / a & gt;
      & lt; / li & gt;
      & lt; li & gt;
       & lt; a href = 'your_url_here' target = '_ blank' & gt; & lt; span class = "socicon-twitter" & gt; & lt; / span & gt; & lt; / a & gt;
      & lt; / li & gt;
     & lt; li & gt;
       & lt; a href = 'your_url_here' target = '_ blank' & gt; & lt; span class = "socicon-googleplus" & gt; & lt; / span & gt; & lt; / a & gt;
      & lt; / li & gt;
        & lt; li & gt;
       & lt; a href = 'your_url_here' target = '_ blank' & gt; & lt; span class = "socicon-behaviornce" & gt; & lt; / span & gt; & lt; / a & gt;
      & lt; / li & gt;
    & lt; / ul & gt;  

Và áp dụng một số kiểu như sau:

  .socicons-list {
list-style: none;
hiển thị: flex;
justify-content: trung tâm;
}
.socicons-list li {
lề: 30px 10px;
}
.socicons-list li a {
văn bản-trang trí: không có;
đệm: 30px;
font-size: 30px;
bán kính biên giới: 50%;
màu: #fff;
màu nền: # f1f1f1;
chuyển tiếp: tất cả 150ms dễ dàng vào-ra;
}
.socicons-list li a: hover {
text-shadow: 0 5px 10px # 212121;
}
.socicons-list li: nth-child (1) a {
màu nền: # 3e5b98;
}
.socicons-list li: nth-child (2) a {
màu nền: # c13584;
}
.socicons-list li: nth-child (3) a {
màu nền: # 4da7de;
}
.socicons-list li: nth-child (4) a {background-color: # dd4b39;}
.socicons-list li: nth-child (5) a {background-color: # 1769ff;}  

Nhấp vào bản trình diễn để xem nó đang được sử dụng:

Xem Bút
SMIcons4
bởi Helen ( @ CF-251 )
trên CodePen .

Triển khai các biểu tượng bằng tiện ích WP

Nếu trang web của bạn được xây dựng trên WordPress, có một cách tuyệt vời để thêm khối với các biểu tượng xã hội bằng tiện ích WordPress. Để cắt ngắn một câu chuyện dài, chỉ cần xem hướng dẫn này:

Xem Thêm  Đặt trong JavaScript - javascript có một bộ

Thêm biểu tượng mạng xã hội bằng plugin WP

Bạn có thể xem qua các plugin khác nhau có thể hữu ích trong việc thêm tài khoản xã hội vào trang của bạn tại đây – Các plugin WordPress để thêm Biểu tượng truyền thông xã hội .

Chú ý đến Cửa sổ bật lên trên các nút chia sẻ trên mạng xã hội & amp; Plugin Pop Up Social Sharing Icons của UltimatelySocial, công cụ giúp bạn tiết kiệm rất nhiều thời gian khi thêm bộ biểu tượng vào trang web của mình:

Tôi hy vọng bài viết này hữu ích với bạn và vui lòng để lại nhận xét của bạn về các cách thêm biểu tượng xã hội khác nhau!

Biểu tượng truyền thông xã hội cao cấp

750 Bộ biểu tượng quản lý kinh doanh

Tải xuống | MonsterONE

Bộ biểu tượng ứng dụng web

Tải xuống | MonsterONE

Bộ biểu tượng mạng xã hội có khoanh tròn màu đen

Tải xuống

Bộ biểu tượng sử dụng trang web

Tải xuống | MonsterONE

50 Bộ biểu tượng mạng xã hội

Tải xuống | MonsterONE

Bộ biểu tượng bóng dài phẳng 50 phụ nữ

Tải xuống | MonsterONE

Mẫu bộ biểu tượng Unoline

Chiều rộng

Tải xuống | MonsterONE

45 Bộ biểu tượng được lấp đầy dòng web kỹ thuật số

Giảm l oad | MonsterONE

Bộ biểu tượng ứng dụng hình tròn

Giảm l oad | MonsterONE

8 – Bộ biểu tượng hai màu dòng web kỹ thuật số

Giảm l oad | MonsterONE

Tái bút. Chỉ để đảm bảo rằng bạn sẽ nhận được d esign mẫu studio ở đúng nơi.

Câu hỏi thường gặp: Các nút mạng xã hội html

Tại sao tôi cần các biểu tượng mạng xã hội trên trang web của mình?

Phương tiện truyền thông xã hội có thể rất hữu ích trong việc quảng bá và quảng cáo trang web của bạn. Nếu thương hiệu của bạn có các tài khoản mạng xã hội, sẽ là khôn ngoan nếu tạo cơ hội cho khách truy cập trang web tham gia cùng họ và chia sẻ bài đăng của bạn theo dòng thời gian của họ.

Phông chữ biểu tượng là gì?

Đây là một phông chữ chỉ bao gồm các biểu tượng. Những biểu tượng đó có thể được sử dụng để thêm các nút mạng xã hội vào trang của bạn.

Tôi nên thêm tài khoản mạng xã hội nào vào trang web?

Khi chọn mạng xã hội để đặt tài khoản cho thương hiệu của mình, bạn phải nghĩ ai sẽ là khán giả của mình? Trong hầu hết các trường hợp, một trang Facebook, tài khoản Instagram, LinedIn và Twitter là đủ.

Đọc thêm: các nút mạng xã hội html


Xem thêm những thông tin liên quan đến chủ đề cách hiển thị các biểu tượng mạng xã hội trên trang web

How To Add Social Media Icons/Buttons To YouTube Channel 2016

alt

  • Tác giả: Bob’s Den
  • Ngày đăng: 2016-05-15
  • Đánh giá: 4 ⭐ ( 2079 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How To Add Social Media Icons/Buttons To YouTube Channel 2016: http://www.trueonlineriches.com/how-to-add-social-media-iconsbuttons-to-youtube-channel-2016/

    Video shows exactly how you can Add Your Social Media Icons/Buttons to your YouTube Channel Page. Adding social media icons to your YouTube profile would definitely open doors for more discover-ability of your online presence.
    I would personally suggest that you be active on at least three social media websites. This could help to get more people to see your content/service on your main platform(blog/website/YouTube).

    As of now YouTube only allows only 5 social media icons to be displayed on your YouTube Channel art. But if you have more that five social media links, it would still show up on your “About” section of your YouTube channel.

    To arrange the social media icons, you have to enter the social media website URLs accordingly when you enter those. You can watch how you can do that @ 1:43 .

    YouTube Tutorial Playlist: https://www.youtube.com/playlist?list=PLhmpT5LyG9bfB_cUoBUFJBVv3hXcME8A2

    Feel free to comment here if you have any more questions about How to add social media icons to YouTube channel.

    Subscribe to Bob’s Den: http://www.youtube.com/subscription_center?add_user=EmpowerWithBob

Kích thước Logo cho Trang Web, Mạng Xã hội, In ấn và các Mục đích Khác

  • Tác giả: www.logaster.com
  • Đánh giá: 3 ⭐ ( 3015 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn sẽ dễ dàng thay đổi kích thước chuẩn logo của mình để nó trông gọn gàng và phong cách hơn trên các trang truyền thông xã hội, trang web của công ty và tài liệu tiếp thị.

Biểu Tượng Cảm Xúc Bằng Ký Tự ❤️ 1001 Icon, Emoji Loại

  • Tác giả: symbols.vn
  • Đánh giá: 3 ⭐ ( 4973 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ Sưu Tập ✅ 1001+ Biểu Tượng Cảm Xúc Bằng Ký Tự, Icon, Emoji Các Loại ❣️ Thường Được Sử Dụng Cho Facebook (FB), Zalo, Viber.

Top 10 trang mạng xã hội lớn nhất và được truy cập nhiều nhất thế giới

  • Tác giả: websolutions.com.vn
  • Đánh giá: 5 ⭐ ( 9940 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trang mạng xã hội đang chiếm dần ưu thế so với các trang blog, diễn đàn… Với khả năng kết nối cộng đồng và chia sẻ thông tin, các trang mạng xã hội

Cách thêm biểu tượng mạng xã hội vào WordPress

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 5 ⭐ ( 8514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tốt nhất để kết nối hồ sơ mạng xã hội với trang web WordPress của bạn là thêm các biểu tượng mạng xã hội vào thanh bên của bạ

Hiển thị các biểu tượng trên màn hình nền Windows

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 9469 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách hiển thị các biểu tượng trên màn hình nền Windows.

Làm cách nào để thêm các biểu tượng mạng xã hội vào chữ ký Outlook?

  • Tác giả: vi.extendoffice.com
  • Đánh giá: 3 ⭐ ( 8094 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python trong từ khóa - trong từ khóa trong python

By ads_php