个人中心
gpt4 book ai didi

html - 使类(class)图标(电话)可点击

转载 作者：行者123 更新时间：2023-11-28 02:35:46 27 4
gpt4 key购买 nike

我目前正在使用一些很棒的字体来将一些图像(如资源)嵌入到我的站点中。

我想创建一个超链接图标，单击它可以提示调用电话。我目前有图标漂浮在右上角，但我无法使其可用。我只希望图标成为超链接，不希望围绕它的任何文本。我想使用 Font Awesome 图标而不是图像，以便在用户放大时可以按比例放大。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DB Plumbing | About</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://use.fontawesome.com/3a2264e344.js"></script>
  <script src="html9shiv.js"></script>
  <link rel="shortcut icon" type="image/png" href="wrench.png"/>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="desciption" content = "Darran Brady Plumbing">
  <meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
  <meta name = "author" content ="DB, Darran, Brady, Darran Brady">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
 x.className += " responsive";
 } else {
 x.className = "topnav";
 }
}
</script>
</head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">DB</span> Plumbing</h1>
        </div>
        <nav>
          <ul class="topnav" id="myTopnav">
            <li class="active"><a href="home9.html">Home</a></li>
            <li><a href="about9.html">About</a></li>
            <li><a href="services9.html">Services</a></li>
            <li><a href="coverage9.html">Coverage</a></li>
            <li><a href="contact9.html">Contact</a></li>
            <li class="icon">
 <a href="javascript:void(0);" style="font-size:200%;" onclick="myFunction()">☰</a>
        </nav>
        </div>
        </header>

<div class="container">
      <div class="dark">
            <div class="callus"><i class="fa fa-phone fa-3x" ></i><a href="www.bbc.co.uk"></a>          </div>

            <h2>Our Story | Our Family</h2>
            </div>
            </div>

<section id="main">
      <div class="container">

        <article id="main-col">
          <h1 class="page-title">Our Journey</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
          </p>
          <p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
          </p>
        </article>

        <aside id="sidebar">
          <div class="dark">
            <h3>What We Do</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
          </div>
        </aside>
      </div>
    </section>
 <footer>
      <p>Darren Brady Plumbing Copyright &copy; 2017</p>
    </footer>
  </body>
</html>

最佳答案

您需要包装 <i>超链接中的标记 <a>标签。 <a> 的所有子元素单击时会将您带到超链接。

<div class="callus"><a href="www.bbc.co.uk"><i class="fa fa-phone fa-3x" ></i></a></div>

关于html - 使类(class)图标(电话)可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47423501/

27 4 0
文章推荐： html - 缓存？有关图片的 div 在上传后 3 小时内打开网站的电脑上不起作用
文章推荐： css - 将 elm-css 与 elm-mdl 一起使用
文章推荐： javascript - 检测是否从值中选择了特定选项
文章推荐： c++ - 在结构 : Do arrays get copied 中复制构造函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com