Question

这是我正在做的设计，我所做的一切都正确，但是无法修复电话图标部分的最后一部分。

                    <!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>&#10004;</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
                                        <span style="color:#0f7abd"><b>&#10004;</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
                                        <span style="color:#0f7abd"><b>&#10004;</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
                                        <span style="color:#0f7abd"><b>&#10004;</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电话图标的问题

Answer 1

<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>&#10004;</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
                                        <span style="color:#0f7abd"><b>&#10004;</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
                                        <span style="color:#0f7abd"><b>&#10004;</b></span> <span style="color:#afaf83; margin-left:15px">Loremei ipeisum is simplye meto ply</span><br>
                                        <span style="color:#0f7abd"><b>&#10004;</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>

使用位置：实际；左：fa fa-phone的 style 标签

上的30px

如何使用引导程序修复fa fa电话图标部分

1 个答案: