繁体   English   中英

在电话图像旁边的锚标签中显示电话链接,在信封图像旁边显示电子邮件链接

[英]to show the telephone link in an anchor tag just beside of its phone image and Email link just beside of envelop image

我试图在其 fa fa-phone 电话图像旁边的锚标签中显示电话号码链接,而在信封图像旁边显示电子邮件链接。 但不起作用我下面给出的代码,我想显示电话和电子邮件的链接应该显示在图像的左侧和左侧

 <div class="col-sm-6 col-md-6 text-center text-white"> <font color="white"> <h4>My Company Ltd</h4> </font> </div> <div class="col-sm-2 col-md-2" text-right> <i class="fa fa-phone" style="color:#fff;"></i> &nbsp; <a href="tel:4324434" style="font-size: 1.5rem; text-decoration: none">32424324</a> </div> <div class="col-sm-2 col-md-2" text-right> <i class="fa fa-envelope" style="color:#fff;"></i> &nbsp; <a href="ppp@gmail.com" style="font-size: 1.3rem; text-decoration: none">ppp@gmail.com</a> </div>

您需要在锚标记中添加 (i)。

试试下面的代码:

<!DOCTYPE html>
<html>
   <head>
      <title>Font Awesome Icons</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
      <div class="col-sm-6 col-md-6 text-center text-white">
         <font color="white">
            <h4>My Company Ltd</h4>
         </font>
      </div>
      <div class="col-sm-2 col-md-2" text-right>

         <a href="tel:4324434" style="font-size: 1.5rem; text-decoration: none"><i class="fa fa-phone" style="color:red;"></i> 32424324</a>
      </div>
      <div class="col-sm-2 col-md-2" text-right>

         <a href="ppp@gmail.com" style="font-size: 1.3rem; text-decoration: none"> <i class="fa fa-envelope" style="color:red;"></i> ppp@gmail.com</a>
      </div>
   </body>
</html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM