如何在HTML中添加社交媒体图标

Graphic Design

19 April 2021 Helen Marshall

Share Tweet Share Pin

添加社交媒体图标的方法 HTML
添加社交图标作为图像(PNG, SVG, EPS等).)
添加社交图标作为图标字体
使用WP小部件实现图标
使用WP插件添加社交媒体图标

在你的网站上添加社交媒体图标是一个很好的方法 make connections 与你的客户通过社交网络，以一种非正式的方式获得他们的反馈 and involve them in your company’s life.

需要一些很酷的数据可视化想法? PPT presentation slides will get the job done.

如何在HTML中添加社交媒体图标

有多种方法可以在你的网站上添加社交媒体图标:

添加图标作为所需格式的图像- .png, .svg or .eps.
Add them using icon fonts - FontAwesome, Glyphicons etc.
使用WP小部件实现图标.
通过WP插件添加社交媒体图标.

你可以选择一个最适合你的，或者尝试所有的.

添加社交图标作为图像(PNG, SVG, EPS等).)

如果你是一个设计师，你可以自己创建或定制图标. But if you’re not, 或者只是想节省时间, 您可以使用许多可以选择图标的服务 packs and download them. The most popular are:

Vecteezy

选择图标包 most relevant 根据您的要求下载它.

然后将文件上传到媒体库并添加它们 in 以下方法(适用于HTML网站):

See the Pen
SMIcons5 by Helen (@CF-251)
on CodePen.

并添加一些样式来调整图标的大小和位置:

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

Flaticon

将图标添加到您的集合中，下载它们并 incorporate them into your code in the same way as the previous case.

IconFinder

你可以找到很多免费的社交游戏 icon packs here, too. 只要找到你更喜欢的风格，把他们添加到你的社交圈子里，享受吧 increased 社交网络中的人气!

有一种方法可以将社交图标应用为SVG图像. 看看下面的例子，看看如何定制它们:

See the Pen
SMIcons5 by Helen (@CF-251)
on CodePen.

See the Pen
SMicons6 by Helen (@CF-251)
on CodePen.

添加社交图标作为图标字体| html社交媒体按钮

FontAwesome

FontAwesome可能是当今最流行的图标字体. 它非常容易实现和使用. Let’s look at an example.

Add this code to your HTML:

将样式添加到您的样式中.CSS文件(你可以添加你自己的，或者使用这个例子):

body {
   text-align: center;
 } 
.wrapper {   
display: inline-flex;   
justify-content: center; 
} 
.wrapper i {   
padding: 10px;   
文本-阴影:0px 6px 8px rgba(0,0,0,0.6);   
过渡:所有缓进缓出150ms; 
} 
.wrapper a:nth-child(1) {   
color: #dd4b39; 
} 
.wrapper a:nth-child(2) {   
color: #4867AA; 
} 
.wrapper a:nth-child(3) {   
color: #1DA1F2; 
} 
.wrapper i:hover {   
margin-top: -3px;   text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4); 
}

And this is how it works:

See the Pen
SMIcons7 by Helen (@CF-251)
on CodePen.

顺便说一下，你可以在 FontAwesome Cheatsheet.

实施的例子:

See the Pen
SMIcons1 by Helen (@CF-251)
on CodePen.

See the Pen
SMIcons2 by Helen (@CF-251)
on CodePen.

See the Pen
SMIcons3 by Helen (@CF-251)
on CodePen.

Socicon

另一种方法是使用Socicon图标字体.

Go to the website:

并应用如下样式:

.socicons-list {
list-style: none;  
display: flex;  
justify-content: center;
} 
.socicons-list li {
margin: 30px 10px;
} 
.socicons-list li a {
text-decoration: none;  
padding: 30px;  
font-size: 30px;  
border-radius: 50%;  
color: #fff;  
background-color: #f1f1f1;  
过渡:所有缓进缓出150ms;
} 
.socicons-list li a:hover {
文字-阴影:0 5px 10px #212121;
} 
.social -list li:n -child(1) a {
background-color: #3e5b98;
} 
.social -list li:n -child(2) a {
background-color: #c13584;
} 
.Socicons-list li:n -child(3) a {
background-color: #4da7de;
} 
.social -list li:n -child(4) a{background-color: #dd4b39;} 
.social -list li:n -child(5) a{background-color: #1769ff;}

点击演示查看使用情况:

See the Pen
SMIcons4 by Helen (@CF-251)
on CodePen.