html - 如何使用 Bootstrap 修复 fa fa 电话图标部分-6ren

html - 如何使用 Bootstrap 修复 fa fa 电话图标部分

转载作者：行者123 更新时间：2023-11-28 15:10:09

这就是我正在做的设计，我做的每一件事都是正确的，但无法修复最后一部分，即 fa fa 电话图标部分。

                    <!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 电话图标问题

最佳答案

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

使用position: realtive;左:30px 在 fa fa-phone style 标签

关于html - 如何使用 Bootstrap 修复 fa fa 电话图标部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52060171/

文章推荐： html - 具有不同大小内容的相等 flexbox 网格 + 分隔符

文章推荐： javascript - 跨浏览器通信

文章推荐： html - 如何将容器 div 中的一个子 div 居中？

css - 图标(fontawesome， Material 图标)闪烁!/？问题
我从来没有遇到过这种问题 - 我也不知道为什么.. 有些图标丢失并以“?/!”闪烁显示发生了什么事？它是一个提交按钮。我在另一个按钮中有相同的图标 - 那里没问题。 SIGN! 有什
javascript - 如何使用 ng-click 功能显示 ionic 图标(fa 图标)？
我只需要在单击按钮时显示 ionic 图标。我试着在那个图标上放一个类并做到了: .icn { visibility: visible; } 但是没有用，有没有人知道另一种方法？最佳答案 Sho
托盘中的c++图标
我用qt在托盘里做了一个应用。在我的电脑上，这是一个很好的项目，我在托盘栏中看到了图标，但是当我将其发布给其他人时，他们看不到该图标，它只是一个可以使用但不显示图标的隐形方 block 。但在我的电脑
delphi - 如何在Delphi的TListView子项上绘制bmp/图标？
我想使用delphi将图标/ bmp绘制到TListView的子项中。但是我不知道该怎么做到。它适用于列表中的第一项，但子项存在问题。最佳答案您可以使用CustomDrawSubItem事件。下
标题栏中的 cocoa 图标
我想将标题栏中的图标设置为应用程序的图标 [[myWindow standardWindowButton:NSWindowDocumentIconButton] setImage:[NSApp app
所有应用程序窗口的 WPF 图标
可以设置一个图标，以便在当前应用程序的每个窗口上使用它。这样我就设置了一次(不是手动在每个窗口上设置)..？最佳答案关于这个主题的一个很好的引用在这里 MSDN 。表明您有一个应用程序图标(桌面图
browser - 当书签拖到工具栏时如何设置图标/图标？
我为自己制作了一个小书签，它的功能很好，但当添加到 Opera 或 Firefox 的工具栏时，它只是呈现浏览器的默认书签图标(分别是地球仪和星星)。我的网站有一个网站图标，窗口、选项卡甚至 [网站]
javascript - 更改responsiveCollapse模型中的默认+/-图标
制表符中的responsiveCollapse 折叠展开功能的默认图标似乎未居中。是否有更改此图标的选项。也许是右下胡萝卜？最佳答案 responsiveCollapse 格式化程序只是一个像所有其
javascript - 单击列表时显示所有数据以及图像/图标
上面是下拉列表，当单击列表时，其值将与图像一起显示在上面的字段(顺便说一句，这是一个按钮)中。我已经实现了显示文本，但似乎无法显示图像。这是我的标记如下... 广东 @foreach
每个航路点上的 KML 图标
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。对于每个节点，我们都有一个极阵列，电缆始终连接到阵列中的下一个极。制作简单路径的导出似乎很容易。但是这些路径只是显示一
每个航路点上的 KML 图标
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。对于每个节点，我们都有一个极阵列，电缆始终连接到阵列中的下一个极。制作简单路径的导出似乎很容易。但是这些路径只是显示一
Java JComboBox 图标
在 JTable 中显示数据。一列用作字段复选框。问题是在显示ChceckBox 中而不是出现图标true/false。我该如何解决这个问题？添加数据: private DefaultTableMo
c# - 在DataGridView中使用DataTable显示小图(图标)
[编辑] 我想使用 DataTable 在 Datagridview 中使用图像。 RadioButton 只是这篇文章的一种简单问题格式。让我为此澄清一下。如何使用绑定(bind)样式在 dat
c# - 如何为组合框中的每个项目添加图像/图标？
我正在使用 C# 开发 win 表单应用程序。我遇到了一个需要向用户提供 ComboBox 的场景。现在，为了使外观更具吸引力，我想在该组合框的每个项目之前显示一个小图像或图标。我查看了一些提供此功
JavaScript 序列化图像(图标)
我正在 CrossRider 中构建一个扩展。我需要在数据库中保存我有它们的 url 的图像/图标。它们是微小的图像，不会成为数据库中的问题。我可能有类似的东西可以访问 background.js:
JavaFX 如何在不损失质量的情况下使用和缩放图像/图标？
我需要使用我的 JavaFX 应用程序中的一些元素，这些元素使用带有自定义符号/图标的按钮横幅或背景图像。此应用程序应该在具有不同屏幕分辨率的多个设备上运行，并且我还(最终)需要缩放图像/图标(
导航栏中的 Android 图标
我怎样才能在 android studio 中做这样的事情: 我想要一个导航栏，您可以在其中看到名称、图标以及打开抽屉导航的机会 :D (图片是用Figma制作的) 最佳答案将重力设置为在 Draw
android - 更改操作栏的按钮状态(图标)
当我在 ViewPager 中滑动 fragment 时，如何动态更改 Action Bar 的操作按钮图标。取决于 fragment 按钮必须改变状态(图标)。最佳答案您可以在 onPrepar
php - 显示多行(WHILE)图标
我有两个 while 循环，一个是循环遍历聊天日志以检索日期、用户名、消息，另一个 while 循环是从单独的表中检索图标这有两列 chars 和 image (image-name.*) 我可以显
系统偏好设置面板中缺少 MySql 图标
我正在尝试重新启动 mysql(一个完全不同的问题)，MySql 肯定已安装(版本 14.14)，并且根据我收集的信息，我应该在系统偏好设置面板的底部看到它的图标，但它是不在那里。安装过程中是否出现了

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何使用 Bootstrap 修复 fa fa 电话图标部分