Question

我目前正在使用一些字体很棒的方法将一些像资源这样的图像嵌入到我的网站中。

我想创建一个可以点击以提示拨打电话的超链接图标。我目前在右上方浮动图标，但我无法使其可用。我只希望图标是超链接，不希望任何文本围绕这个。我想使用字体真棒图标而不是图像，以便在用户放大时我可以放大。

<!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>

Answer 1

您需要将length > 1标记包含在超链接<i>标记中。 <a>的所有子元素都会将您带到点击的超链接。

<a>

Answer 2

使用Fontawsome显示icone并使用href="tel:911"创建电话，请参阅代码段

＆＃13;

.callus {
position:fixed;
right:10px;
top:0px;
width:30px;
height:30px;
cursor:pointer;
}
.callus i {
color:green;
transition:all 1s ease-out
}
.callus:hover i {
transform:scale(1.3);
opacity:0.8;
transition:all 1s ease-out
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <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></li></ul>
        </nav>
        </div>
        </header>

<div class="container">
      <div class="dark">
            <div class="callus"><a href="tel:911"><i class="fa fa-phone fa-3x" ></i></a><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>

＆＃13;

使类图标（手机）可点击

2 个答案: