📌  相关文章
📜  如何在HTML中添加社交媒体图标

📅  最后修改于: 2020-11-04 01:30:56             🧑  作者: Mango

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

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

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


   
    
   
Add the icons of social media


 
Hello User!...
You are at JavaTpoint Site...

步骤2：现在，我们必须将光标放在Html文档的title标签之后的head标签中，然后定义 Hello User!...
You are at JavaTpoint Site...
Following are the icons of social media

下面的屏幕快照显示了以上HTML代码的输出：

添加粘性社交媒体图标

如果要使用内部CSS和HTML代码在HTML文档中添加粘性社交媒体图标，则要在网页上显示这些图标，则必须遵循以下步骤。使用这些简单的步骤，我们可以轻松添加粘性社交媒体图标。

步骤1：首先，我们必须在任何文本编辑器中键入HTML代码，或在文本编辑器中打开要添加社交媒体粘性图标的现有HTML文件。


   
    
   
Add the sticky icons of social media


 
Hello User!...
You are at JavaTpoint Site...

第2步：现在，我们必须将光标放在Html文档的<head>标记中的标记，然后附加CDN链接。因此，我们必须在<head>标记中键入以下<link>标记。</ html></p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </span></code></pre> </div> <p>步骤3：现在，我们必须使用CSS代码设计粘性媒体图标的结构。因此，我们必须在代码块之后添加以下代码中所示的代码<link>HTML文档中的标签。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><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> </span></code></pre> </div> <p>步骤4：现在，我们必须在<body>标签。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><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> </span></code></pre> </div> <p>步骤5：最后，我们必须保存HTML文件，然后在浏览器中运行该文件。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><!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 Hello User!...
You are at JavaTpoint Site...

以下屏幕快照显示了粘性社交媒体图标的输出：