html - 如何使用引导程序修复 fa fa 电话图标部分
问题描述
这就是我正在做的设计，我所做的一切都是正确的，但无法修复最后一个部分，即 fa fa phone icon 部分。
<!DOCTYPE HTML>
<html>
<head>
<title>Web app design & Development</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background:#e1e1d0">
<div>
<img class="img-responsive" src="banner.jpg" alt="banner Image" width="100%" height="500px">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h3 style="font-size:50px"><span style="color:#cc7a00; margin-left:15px"><b>Business</b></span> <span style="color:#0f7abd"><b>Solution</b></span></h3>
<p style="font-size:28px; margin-top:-20px; margin-left:60px">that will help you out in disaterous state.</p>
</div>
</div>
</div><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<p><span style="color:#0f7abd;font-size:20px; margin-left:10px"><b>Business</b></span> <span style="color:#cc7a00;font-size:20px"><b>Alliances</b></span></p>
<p class="text-justify" style="color:#afaf83;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum erat libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero,
pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesqueLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum erat libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero,
pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque </p>
</div>
<div class="col-sm-4" style="padding-left:45px">
<p><span style="color:#0f7abd;font-size:20px"><b>Support</b></span> <span style="color:#cc7a00;font-size:20px"><b>Alliances</b></span></p>
<p>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span>
</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-1" style="padding-left:45px">
<i class="fa fa-phone" style="font-size:35px; color:#ffffff; width:35px; height:35px;border-radius:4px;background-color:#0f7abd;text-align: center;"></i>
</div>
<div class="col-sm-3" style="margin-top:-8px">
<p><a href="#" style="text-decoration:none"><span style="color:#cc7a00; font-size:23px"><b>(098)-2304-5678</b></span><br><span style="color:#0f7abd; padding-left:42px">www.weloreorm.com</span></a></p>
</div>
</div>
</div><br>
</body>
</html>
上面的代码是我尝试过的，但我无法解决这个问题。
我试图从早上开始解决这个问题，但无法做到。所以请帮我解决这个问题。
谢谢你。第一张图片是我做的图片，第二张图片是我需要的图片所以请任何人告诉我我如何解决问题 fa fa 电话图标问题
解决方案
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<html>
<head>
<title>Web app design & Development</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background:#e1e1d0">
<div>
<img class="img-responsive" src="banner.jpg" alt="banner Image" width="100%" height="500px">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h3 style="font-size:50px"><span style="color:#cc7a00; margin-left:15px"><b>Business</b></span> <span style="color:#0f7abd"><b>Solution</b></span></h3>
<p style="font-size:28px; margin-top:-20px; margin-left:60px">that will help you out in disaterous state.</p>
</div>
</div>
</div><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<p><span style="color:#0f7abd;font-size:20px; margin-left:10px"><b>Business</b></span> <span style="color:#cc7a00;font-size:20px"><b>Alliances</b></span></p>
<p class="text-justify" style="color:#afaf83;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum erat libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero,
pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesqueLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum erat libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero, pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque libero,
pulvinar tincidunt leo consectetur eget. Curabitur lacinia pellentesque </p>
</div>
<div class="col-sm-4" style="padding-left:45px">
<p><span style="color:#0f7abd;font-size:20px"><b>Support</b></span> <span style="color:#cc7a00;font-size:20px"><b>Alliances</b></span></p>
<p>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
<span style="color:#0f7abd"><b>✔</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span>
</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-1" style="padding-left:45px">
<i class="fa fa-phone" style="font-size:35px; color:#ffffff; width:35px; height:35px;border-radius:4px;background-color:#0f7abd;position: relative; left: 30px;text-align: center;"></i>
</div>
<div class="col-sm-3" style="margin-top:-8px">
<p><a href="#" style="text-decoration:none"><span style="color:#cc7a00; font-size:23px"><b>(098)-2304-5678</b></span><br><span style="color:#0f7abd; padding-left:42px">www.weloreorm.com</span></a></p>
</div>
</div>
</div><br>
</body>
</html>使用位置：realtive；左： fa fa-phone样式标签处的 30px
推荐阅读
- python - Pandas 数据框中的 yyyy-MM-ddT00:00:00 到 yyyy-MM-dd 00:00:00
- docker - 使用 docker-compose 在主机和多个容器之间共享目录
- ajax - 如何从我的functions.php运行我的函数到ajax请求
- xml - 如何从重复的 xml 字段中选择第一次出现？
- outlook - 交换网络服务。从 Outlook 中获取所有联系人，而不仅仅是从联系人文件夹中获取。找不到人
- android - 有什么方法可以通过字节范围在 android 中使用改造从服务器下载文件
- javascript - HTML 中的 jQuery 自定义验证器
- javascript - 数据未使用 node.js 插入 mongodb
- node.js - 使用 nginx 作为反向代理和节点快递作为 backand 的子域的内容安全策略 (csp) 问题
- merge - 试图将 6000 个小拼花文件合并为一个拼花文件