登录
当前位置： 首页 > 知识库问答 >
问题：

社交媒体按钮上的引导居中图标

殷安顺
2023-03-14

我有一些社交媒体图标使用引导字体-很棒的图标。我的问题是图标没有居中。

这里是我的代码，它的大部分是从一个在线来源复制和粘贴。

#HTML
 <!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

#CSS
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.instagram:before {
  background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
  color: sandybrown;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.flickr:before {
  background-color: hotpink;
}
.social-btns .btn.flickr .fa {
  color: hotpink;
}
.social-btns .btn.github:before {
  background-color: black;
}
.social-btns .btn.github .fa {
  color: black;
}
.social-btns .btn.linkedin:before {
  background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
  color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  margin: auto;
  font-size: 0;
  text-align: center;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  text-align: left;
    vertical-align: middle;
    line-height: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;

}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}

我也希望它适用于移动以及。我已经玩了一些边距和文本对齐，但似乎没有什么工作如预期。感谢任何帮助。

共有2个答案

池永长
2023-03-14

使用此HTML代码：

<div class="social-btns">
   <a class="btn facebook text-xs-center" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google text-xs-center" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin text-xs-center" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram text-xs-center" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr text-xs-center" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github text-xs-center" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
裴硕
2023-03-14

您只需添加.social-btns.btn{padding:18px 18px；}

null

.social-btns .btn{padding: 18px 18px;}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.instagram:before {
  background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
  color: sandybrown;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.flickr:before {
  background-color: hotpink;
}
.social-btns .btn.flickr .fa {
  color: hotpink;
}
.social-btns .btn.github:before {
  background-color: black;
}
.social-btns .btn.github .fa {
  color: black;
}
.social-btns .btn.linkedin:before {
  background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
  color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  margin: auto;
  font-size: 0;
  text-align: center;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  text-align: left;
    vertical-align: middle;
    line-height: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;

}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
 类似资料：
  • 社交媒体用例图/小精灵

    考虑instagram提要场景。我想让我关注的人“发布”所有帖子。对于每一个帖子，我都想知道我是否喜欢它，还想知道我关注的其他人中有谁喜欢它（如果有的话）。在gremlin中实现这一点的最佳解决方案是什么（可能避免重复）？ 图像清晰 下面只给出了用户2“发布”的帖子。如何在同一查询中获取其他信息？

  • 生成社交媒体上帖子的预览

    这可能是一个相当开放的问题，但我需要发布到各种社交媒体网站，如facebook，twitter，领英，谷歌等。现在请记住，这是一个真正的帖子，而不仅仅是一个共享-换句话说，我已经通过OAuth存储了用户凭据，并将在他们的墙上制作一个格式化的帖子，提要等。 问：有没有什么方法可以让我在各种社交媒体上准确或非常接近地预览这篇文章？例如，在用户发布帖子之前，我可以向他们展示他们在facebook或谷歌上

  • 引导4，如何将按钮居中对齐？

    不知道如何将此按钮居中。在BS3中，我只使用中心块，但在BS4中，这不是一个选项。有什么建议吗？

  • Firestore社交媒体帖子表

    因此，我想创建一种社交媒体应用程序，并使用fiRest作为主数据库。 目标是创建“facebook”新闻源。 每个用户都有一个朋友列表，每个用户都可以创建帖子。 每个帖子都可以被修改为对应用程序的所有用户或用户朋友可见。所以每个用户都可以向他所有的朋友发布帖子，并向应用程序中的每个人发布帖子。 此外，用户还可以在新闻提要中“保存”他们喜欢的帖子。（类似帖子子集合） 现在在用户的新闻提要中-我如何查

  • Firestore社交媒体模型结构

    我有一个集合，我的应用程序在其中存储用户的所有帖子，数据结构如下： 现在，我想向我的用户显示这个集合的所有帖子；但是，只有当用户跟随创建帖子的人时，即帖子文档的字段适合。 我知道如果用户只关注一个人，查询集合是很简单的，也就是说，我有一个简单的子句。但是：如果我的用户关注10,000人或更多人呢？我怎么查询呢？ 另外，我应该如何存储，即用户跟随的人？使用简单的数组似乎不适合我，但是使用所有其他选项

  • 卡体居中（引导）[重复]

    我有一个小问题与卡体，我想有两个列在中央，正如你在图片中看到的，它有点在左边比较按钮...我试过一些类在引导，但我似乎找不到正确的一个。希望你能帮助我[在伊舍伍德之后编辑] 所以我试着把文本放在中心，但我不知道为什么它不能像代码段一样工作...

相关问答

Firestore社交媒体模型结构卡体居中（引导）[重复]社交媒体应用中用户交互的Firestore结构HTML5画布-将保存的图像共享到社交媒体VBox中的JavaFX居中按钮

相关文章

ng-disabled不适用于引导按钮导航栏按钮项目swift的图像如何在Twitter Bootstrap 3中将按钮居中？HTML表单中的多个提交按钮如何更改导航栏的后退按钮的字体？

相关阅读

Bootstrap 按钮Bootstrap 按钮Bootstrap4 按钮JavaFX按钮博乐科技社媒运营面经

相关工具

StartCom多媒体版流媒体广播独立于window的按钮绝对按钮模拟器zyMedia移动端H5媒体播放器

相关文档

CSS Buttons 按钮效果社群思维Linux 内核引导选项简介史上最全设计模式导学Web.py Cookbook 简体中文版
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.