html - 页眉中按钮下的社交媒体图标-6ren

html - 页眉中按钮下的社交媒体图标

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

这就是我的社交媒体链接和按钮现在的样子。

但我想将按钮移到社交媒体链接上方。最好在 5 的中间。

这是我的 HTML:

<div class="container-fluid">
    <div class="col-xs-10 col-sm-3 branding">
        <a class="imgCon" href="{{var protoHost}}">
            <img alt="awesomeinternet Internet Services" src="{{var protoHost}}img/awesomeInternet.png">
        </a>
    </div>

    <div class="col-xs-0">
      <p class="socialmediaspacer headerspacer inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-865-7733" style="color: black"> 613-865-7733</a></p>
      <p class="headercontact headerspacer inlineParagraph"><i class="fa fa-envelope"><a href="mailto:info@awesomeinternet.ca" style="color: black"></i> info@awesomeinternet.ca</a></p>
    </div>
        <a class="inlineParagraph socialspacer brandingspacer" href="https://www.facebook.com/awesomeinternetInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://twitter.com/awesomeinternetcanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a>
    </div>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://www.instagram.com/awesomeinternetinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a>
    </div>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a>
    </div>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a>
    </div>
    <div class="col-xs-1 buttonspacer">
      <button type="button" class="btn btn-primary ">My Account</button>
    </div>
  </div>

还有 CSS:

html{
    position: relative;
    width: 100%;
    min-height: 100%;
}
body{
    font-family: "Roboto";
    margin-bottom: 60px;
}
a{
    color:#00A0F0;
}
.spacer{
    height:70px;
    width: 100%;
}
.socialspacer {
  margin-left: 25px;
  margin-top: 38px;
}
.AccountButton {
  padding-left: 730px;
}
.smallspacer{
  height: 35px;
  width: 100%;
}
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;}
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;}
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;}

.locationTitle{
    text-align: center;
    font-weight: 700;
    font-size: 2em;
    color:#007dd1;
    margin-bottom: 24px;
    margin-left: 24px;
    margin-top: 24px;
}
.Location {
    padding-left: 300px;
    padding-right: 300px;
}
.subTitle{
    text-align: center;
}
.subHead{
    line-height: 1em;
    font-size: .6em;
}
.navbar{
    height: 100px;
    background-color:
}
.navbar>.container-fluid{
    height: 100px;
    padding: 0;
}
.navbar>.container-fluid>*{
    height: 100px;
}
.navbar>.container-fluid img{
    height: 100px;
}
.branding *{
    display: block;
    text-align: center;
    color: #007dd1
}
.headerspacer {
  margin-top: 40px;
}
.socialmediaspacer {
    margin-left: 40px;
}
.navbartext {
      padding-top: 17px;
      padding-left: 277px;
      text-align: center;
      font-size: 17px;
}
.navbarspacer{
  padding-top: 17px;
  padding-left: 55px;
  text-align: center;
  font-size: 17px;
}
.brandingspacer {
  margin-left: 100px;
}
.contactspacer {
  margin-top: 45px;
}
.InternetSpacer {
  height: 45px;
}
.buttonspacer {
  margin-right: -100px;
}
.InfoSpacer {
  margin-left: 45px;
}
.inlineParagraph {
  float:left;
  display:inline;
}
.clear {
  clear:both;
}
.headercontact {
  margin-left: 10px;
}
.centerlinks {
  text-align: center;
}
.navIcon{
    padding: 10px;
    border-radius: 50%;
    color:white;
    background-color: #0071bd;
}
.navbar > li > a:hover{
    text-shadow: 0 1px 3px #CDF;
}
.navbar li:not(.navSep):hover{
    margin: 0 0 -2px 0;
    border-bottom: 2px solid white;
}

.navSep{
    width:2px;
    height: 40px;
    margin: 5px 2px 5px 2px;
    background-color: #A9AFDD;
}

.imgCon{
    max-height: 100%;
    max-width:100%;

}
.imgCon img{
    width: auto;
    height: auto;
    max-width:100%;
    max-height: 100%;
        padding-bottom: 25px;
}

.page{
    width: 100%;
    height: 100%;
    padding-bottom:50px;
}

@media (max-width:768px){
    div[aria-expanded="true"] .navSep{
        display: none;
    }
}

.mainTitle{
    font-size: 1.5em;
    font-weight: 700;
    background-color: white;
}

.extraInfo{
    background-color: #333;
    color:white;
    box-shadow: 1px 1px 2px 1px grey;
    font-size: 1.2em;
}

.footer{
  background-color: #007dd1;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  text-align: right;
}
.footer a{
    text-align: center;
    height: 100%;
    color: white;
}
.footer p{
    text-align: center;
    height: 100%;
    color: white;
}
@media (min-width : 1200px) {
    .col-xl-0{display:none;}

}
@media (max-width : 1200px){
    .col-lg-0{display:none;}
}
@media (max-width : 992px){
    .col-md-0{display:none;}
}
@media (max-width : 768px){
    .col-sm-0{display:none;}
}
@media (max-width : 480px){
    .col-xs-0{display:none;}
    .page {
      padding-bottom: 100px;
    }
    .footer {
      height: 100px;
    }
    .Location {
        padding-left: 140px;
        padding-right: 260px;
    }
}
@media (max-width: 320px){
  .Location {
      padding-left: 70px;
      padding-right: 260px;
  }
  .page {
    padding-bottom: 160px;
  }
  .footer {
    height: 160px;
  }
}




@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}

提前致谢。

最佳答案

html{
    position: relative;
    width: 100%;
    min-height: 100%;
}
body{
    font-family: "Roboto";
    margin-bottom: 60px;
}
a{
    color:#00A0F0;
}
.spacer{
    height:70px;
    width: 100%;
}
.socialspacer {
  margin-left: 25px;
  margin-top: 38px;
}
.AccountButton {
  padding-left: 730px;
}
.smallspacer{
  height: 35px;
  width: 100%;
}
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;}
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;}
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;}

.locationTitle{
    text-align: center;
    font-weight: 700;
    font-size: 2em;
    color:#007dd1;
    margin-bottom: 24px;
    margin-left: 24px;
    margin-top: 24px;
}
.Location {
    padding-left: 300px;
    padding-right: 300px;
}
.subTitle{
    text-align: center;
}
.subHead{
    line-height: 1em;
    font-size: .6em;
}
.navbar{
    height: 100px;
    background-color:
}
.navbar>.container-fluid{
    height: 100px;
    padding: 0;
}
.navbar>.container-fluid>*{
    height: 100px;
}
.navbar>.container-fluid img{
    height: 100px;
}
.branding *{
    display: block;
    text-align: center;
    color: #007dd1
}
.headerspacer {
  margin-top: 40px;
}
.socialmediaspacer {
    margin-left: 40px;
}
.navbartext {
      padding-top: 17px;
      padding-left: 277px;
      text-align: center;
      font-size: 17px;
}
.navbarspacer{
  padding-top: 17px;
  padding-left: 55px;
  text-align: center;
  font-size: 17px;
}
.brandingspacer {
  margin-left: 100px;
}
.contactspacer {
  margin-top: 45px;
}
.InternetSpacer {
  height: 45px;
}
.buttonspacer {
  margin-right: -100px;
}
.InfoSpacer {
  margin-left: 45px;
}
.inlineParagraph {
  float:left;
  display:inline;
}
.clear {
  clear:both;
}
.headercontact {
  margin-left: 10px;
}
.centerlinks {
  text-align: center;
}
.navIcon{
    padding: 10px;
    border-radius: 50%;
    color:white;
    background-color: #0071bd;
}
.navbar > li > a:hover{
    text-shadow: 0 1px 3px #CDF;
}
.navbar li:not(.navSep):hover{
    margin: 0 0 -2px 0;
    border-bottom: 2px solid white;
}

.navSep{
    width:2px;
    height: 40px;
    margin: 5px 2px 5px 2px;
    background-color: #A9AFDD;
}

.imgCon{
    max-height: 100%;
    max-width:100%;

}
.imgCon img{
    width: auto;
    height: auto;
    max-width:100%;
    max-height: 100%;
        padding-bottom: 25px;
}

.page{
    width: 100%;
    height: 100%;
    padding-bottom:50px;
}

@media (max-width:768px){
    div[aria-expanded="true"] .navSep{
        display: none;
    }
}

.mainTitle{
    font-size: 1.5em;
    font-weight: 700;
    background-color: white;
}

.extraInfo{
    background-color: #333;
    color:white;
    box-shadow: 1px 1px 2px 1px grey;
    font-size: 1.2em;
}

.footer{
  background-color: #007dd1;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  text-align: right;
}
.footer a{
    text-align: center;
    height: 100%;
    color: white;
}
.footer p{
    text-align: center;
    height: 100%;
    color: white;
}
.margin-adjust{
  margin-top:-35px;
}
@media (min-width : 1200px) {
    .col-xl-0{display:none;}

}
@media (max-width : 1200px){
    .col-lg-0{display:none;}
}
@media (max-width : 992px){
    .col-md-0{display:none;}
}
@media (max-width : 768px){
    .col-sm-0{display:none;}
}
@media (max-width : 480px){
    .col-xs-0{display:none;}
    .page {
      padding-bottom: 100px;
    }
    .footer {
      height: 100px;
    }
    .Location {
        padding-left: 140px;
        padding-right: 260px;
    }
}
@media (max-width: 320px){
  .Location {
      padding-left: 70px;
      padding-right: 260px;
  }
  .page {
    padding-bottom: 160px;
  }
  .footer {
    height: 160px;
  }
}




@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="col-xs-10 col-sm-3 branding">
        <a class="imgCon" href="{{var protoHost}}">
            <img alt="awesomeinternet Internet Services" src="{{var protoHost}}img/awesomeInternet.png">
        </a>
    </div>
<div class="col-sm-7 margin-adjust">

    <div class="col-xs-0">
      <p class="socialmediaspacer headerspacer inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-865-7733" style="color: black"> 613-865-7733</a></p>
      <p class="headercontact headerspacer inlineParagraph"><i class="fa fa-envelope"><a href="mailto:info@awesomeinternet.ca" style="color: black"></i> info@awesomeinternet.ca</a></p>
    </div>
        <a class="inlineParagraph socialspacer brandingspacer" href="https://www.facebook.com/awesomeinternetInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://twitter.com/awesomeinternetcanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a>
    </div>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://www.instagram.com/awesomeinternetinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a>
    </div>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a>
    </div>
    <div class="col-xs-0">
        <a class="inlineParagraph socialspacer" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a>
    </div>
    </div>
    
    <div class="col-xs-1 col-sm-2 buttonspacer">
      <button type="button" class="btn btn-primary ">My Account</button>
    </div>
  </div>

请检查并更正是否有针对低分辨率的样式并使用 .

关于html - 页眉中按钮下的社交媒体图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36208806/

文章推荐： javascript - angularjs - Grunt 服务给出 "spawn cmd ENOENT"错误

文章推荐： c++ - 如何调整应裁剪和缩放面部以适合大小的图像大小？

文章推荐： javascript - Google 表单保存在 Excel 工作表中

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 - 页眉中按钮下的社交媒体图标