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

2025 年 3 月 25 日 | 阅读 5 分钟

如果想在 Html 文档中使用内部 CSS添加社交媒体图标，以在网页上显示它们，那么需要遵循以下步骤。通过这些简单的步骤，可以轻松添加社交媒体图标。

步骤 1： 首先，需要在任何文本编辑器中输入 Html 代码，或打开要添加社交媒体图标的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the icons of social media
</Title>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
</Body> 
</Html>

步骤 2： 现在，将光标放在 Html 文档标题标签后的 head 标签中，然后定义 <style> 标签，如下所示。

步骤 3： 然后，需要将以下代码用在 <style> 标签的开闭之间。

.fa {
  padding: 20px;
text-align: center;
  margin: 5px 2px;
  font-size: 30px;
  width: 50px;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: white;
}
.fa:hover {
    opacity: 0.9;
}

步骤 4： 成功添加上述代码后，需要在 <head> 标签中链接 CSS 文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

步骤 5： 然后，需要在 Html 文档的 <body> 标签中使用以下代码。

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>

步骤 6：最后，我们必须保存 HTML 文件，然后在浏览器中运行该文件。

<!Doctype Html>
<Html>   
<Head>   
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<Title>   
Add the icons of social media
</Title>
<style>
.fa {
  padding: 20px;
text-align: center;
  margin: 5px 2px;
  font-size: 30px;
  width: 50px;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: white;
}
.fa:hover {
    opacity: 0.9;
}
</style>
</Head>
<Body> 
Hello User!... <br>
You are at JavaTpoint Site... <br>
Following are the icons of social media
</br>
<ul>
<li> 
<a href="#" class="fa fa-facebook"> </a> 
</li>
<li>
<a href="#" class="fa fa-twitter"> </a>
</li>
<li>
<a href="#" class="fa fa-pinterest"> </a>
</li>
<li>
<a href="#" class="fa fa-linkedin"> </a>
</li>
<li>
<a href="#" class="fa fa-instagram"> </a>
</li>
<li>
<a href="#" class="fa fa-youtube"> </a>
</li>
<li>
<a href="#" class="fa fa-google"> </a>
</li>
<li>
<a href="#" class="fa fa-snapchat-ghost"> </a>
</li>
<li>
<a href="#" class="fa fa-skype"> </a></li></ul></Body> </Html>

上述 HTML 代码的输出显示在以下屏幕截图中

添加固定社交媒体图标

如果想在 Html 文档中使用内部 CSS 和 Html 代码添加固定社交媒体图标，以在网页上显示这些图标，那么需要遵循以下步骤。通过这些简单的步骤，可以轻松添加固定社交媒体图标。

步骤 1： 首先，需要在任何文本编辑器中输入 Html 代码，或打开要添加固定社交媒体图标的现有 Html 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the sticky icons of social media
</Title>
</Head>
<Body> 
Hello User!...
You are at JavaTpoint Site...
</Body> 
</Html>

步骤 2： 现在，将光标放在 Html 文档 <head> 标签中 <title> 标签之后，然后附加 CDN 链接。因此，需要在 <head> 标签中输入以下 <link> 标签。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

步骤 3： 现在，需要使用 CSS 代码设计固定媒体图标的结构。因此，需要在 Html 文档中 <link> 标签之后添加如下所示的代码块。

<style> 
/* Style the Sticky icons on web page */ 
.stickyicon-list { 
position: fixed; 
top: 200px; 
transform: translateY(-50%);           
}       
.stickyicon-list a { 
display: block; 
text-align: center; 
padding: 8px; 
transition: all 0.5s ease; 
color: white; 
font-size: 20px; 
}       
/* HOver affect on sticky social media icons */ 
.stickyicon-list a:hover { 
color: #000; 
width:10px; 
} 
 
/* Now we have to design each icon of social media */       
.facebook { 
background: #3b5998; 
color: white;
}       
.twitter { 
color: white; 
background: #00acee; 
} 
.linkedin { 
background: #0e76a8; 
color: white; 
}       
.google { 
color: white; 
background: #db4a39; 
} 
.instagram { 
background: #3f729b; 
color: white; 
}       
.youtube { 
color: white; 
background: #c4302b;  
} 
</style> 

步骤 4： 现在，需要在 <body> 标签中添加以下代码。

<div class="stickyicon-list">
<a href="#facebook" class="facebook"> 
<i class="fa fa-facebook"></i> 
</a> 
<a href="#twitter" class="twitter"> 
<i class="fa fa-twitter"></i> 
</a>     
<a href="#linkedin" class="linkedin"> 
<i class="fa fa-linkedin"></i> 
</a> 
<a href="#google" class="google"> 
<i class="fa fa-google"></i> 
</a>   
<a href="#instagram" class="instagram"> 
<i class="fa fa-instagram"></i> 
</a>                            
<a href="#youtube" class="youtube"> 
<i class="fa fa-youtube"></i> 
</a> 
</div> 

步骤 5：最后，我们必须保存 HTML 文件，然后在浏览器中运行该文件。

<!Doctype Html>
<Html>   
<Head>   
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<Title>   
Add the Sticky icons of social media
</Title>
<style> 
/* Style the Sticky icons on web page */ 
.stickyicon-list { 
position: fixed; 
top: 200px; 
transform: translateY(-50%);           
}       
.stickyicon-list a { 
display: block; 
text-align: center; 
padding: 8px; 
transition: all 0.5s ease; 
color: white; 
font-size: 20px; 
}       
/* HOver affect on sticky social media icons */ 
.stickyicon-list a:hover { 
color: #000; 
width:10px; 
} 
 
/* Now we have to design each icon of social media */       
.facebook { 
background: #3b5998; 
color: white;
}       
.twitter { 
color: white; 
background: #00acee; 
} 
.linkedin { 
background: #0e76a8; 
color: white; 
}       
.google { 
color: white; 
background: #db4a39; 
} 
.instagram { 
background: #3f729b; 
color: white; 
}       
.youtube { 
color: white; 
background: #c4302b;  
} 
</style> 
</Head>
<Body> 
Hello User!... <br>
You are at JavaTpoint Site... <br>
<div class="stickyicon-list">
<a href="#facebook" class="facebook"> 
<i class="fa fa-facebook"></i> 
</a> 
<a href="#twitter" class="twitter"> 
<i class="fa fa-twitter"></i> 
</a>     
<a href="#linkedin" class="linkedin"> 
<i class="fa fa-linkedin"></i> 
</a> 
<a href="#google" class="google"> 
<i class="fa fa-google"></i> 
</a>   
<a href="#instagram" class="instagram"> 
<i class="fa fa-instagram"></i> 
</a>                            
<a href="#youtube" class="youtube"> 
<i class="fa fa-youtube"></i> 
</a> 
</div> 
</Body>
</Html>

固定社交媒体图标的输出显示在以下屏幕截图中

下一主题如何在 Html 中创建页脚

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

添加固定社交媒体图标

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

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

添加固定社交媒体图标

相关帖子

HTML Cellpadding

手风琴 HTML

如何在 HTML 中对齐图片

如何使用 HTML 和 CSS 创建浏览器窗口

HTML 注入

HTML 货币格式

HTML 实操题

HTML 标签周围的括号

HTML 仅输入数字

HTML Scope

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器