Question

我只是无法在图标下显示文字。但是我需要从左到右设置图标。

info = data[:recordset][:row]
info = [info] unless info.is_an? Array
result = info.each_with_object([]) do ....

/* Typography */

html {
	font-family: 'Roboto', sans-serif;
}

@media (min-width: 576px) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}

.icons-social i {
	font-size: 3em;
}


/* Custom Styles */

main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	justify-content: center;
	padding: 0 30px;
	text-align: center;
}

main > .intro {
	font-family: 'Reem Kufi', sans-serif;
	font-size: 3.75em;
	font-weight: 600;
}

main > .tagline {
	font-size: 1.5rem;
	margin: 1.5rem 0;
	font-weight: 100;
}

.icons-social i {
	padding: 10px;
}
#icons-social {
    margin: 0 auto;
    width: 1050px;
    height: 175px;
    margin-top: 89px;
}

.icons_social {
        width:50px;
    float: center;
    width: 100px;
    height: 85px;
}
.icons_social span {
    display:block;
}
.sidebar-social a:hover i.fa-main { color:cyan; }
.sidebar-social a:hover i.fa-LinkedIn { color:cyan }
.sidebar-social a:hover i.fa-Medium { color:cyan }
.sidebar-social a:hover i.fa-YouTube { color:cyan }
.sidebar-social a:hover i.fa-Facebook { color:cyan }
.sidebar-social a:hover i.fa-DarkJpeg { color:cyan }
.sidebar-social a:hover i.fa-Encrypted Crack { color:cyan }
.sidebar-social a:hover i.fa-Slack { color:cyan }	

}	
.devto {
	margin-bottom: -0.20rem;
}

.devto svg {
	margin-bottom: -0.20rem;
	margin-left: 0.675rem;;
	width: 2.65rem;
	height: 2.65rem;
}

我只是无法在图标下显示文字。但是我需要从左到右设置图标。我认为没有多少人理解单击图标。因此，我想将名称添加到页面或部分。

谢谢

Answer 1

这是一个有效的代码笔，向您展示我的工作方式。

https://codepen.io/wearetamo/pen/mGPgxV

基本上，我在HTML上所做的就是创建一行列

<div class="row">           
      <div class="cols">
        <a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i>Main</a>
      </div>
       <div class="cols">
        <a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i>Main</a>
      </div>
      . 
      . YOUR OTHER ICONS here
      .
 </div>

CSS

.row {
  width: 100%;
}
.cols {
  width: 12.5%;
  display: block;
  float: left;
}

Answer 2

这是您想要的吗？

我用div包裹了图标标题，并用a标记了display:inline-block

/* Typography */

html {
  font-family: 'Roboto', sans-serif;
}

@media (min-width: 576px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

.icons-social i {
  font-size: 3em;
}


/* Custom Styles */

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  padding: 0 30px;
  text-align: center;
}

main>.intro {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 3.75em;
  font-weight: 600;
}

main>.tagline {
  font-size: 1.5rem;
  margin: 1.5rem 0;
  font-weight: 100;
}

.icons-social i {
  padding: 10px;
}

#icons-social {
  margin: 0 auto;
  width: 1050px;
  height: 175px;
  margin-top: 89px;
}

.icons_social {
  width: 50px;
  float: center;
  width: 100px;
  height: 85px;
}

.icons_social span {
  display: block;
}

.sidebar-social a:hover i.fa-main {
  color: cyan;
}

.sidebar-social a:hover i.fa-LinkedIn {
  color: cyan
}

.sidebar-social a:hover i.fa-Medium {
  color: cyan
}

.sidebar-social a:hover i.fa-YouTube {
  color: cyan
}

.sidebar-social a:hover i.fa-Facebook {
  color: cyan
}

.sidebar-social a:hover i.fa-DarkJpeg {
  color: cyan
}

.sidebar-social a:hover i.fa-Encrypted Crack {
  color: cyan
}

.sidebar-social a:hover i.fa-Slack {
  color: cyan
}


}
.devto {
  margin-bottom: -0.20rem;
}
.devto svg {
  margin-bottom: -0.20rem;
  margin-left: 0.675rem;
  ;
  width: 2.65rem;
  height: 2.65rem;
}

.icons-social a{
display:inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>John Modica | CybernetiX S3C</title>

  <link rel="icon" href="favicon.ico" type="image/png" />

  <link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Roboto:300" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- <link rel="stylesheet" href="css/themes/indigo-white.css"> -->
  <!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
  <!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
  <link rel="stylesheet" href="css/themes/grey-white.css">
  <!-- <link rel="stylesheet" href="css/themes/white-indigo.css"> -->
  <!-- <link rel="stylesheet" href="css/themes/white-blue.css"> -->
  <!-- <link rel="stylesheet" href="css/themes/white-grey.css"> -->
  <!-- <link rel="stylesheet" href="css/themes/white-red.css"> -->
  <!-- <link rel="stylesheet" href="css/themes/yellow-black.css"> -->
</head>

<body>
  <main>
    <p><img src="https://img.shields.io/badge/Welcome_To-CybernetiX--S3C-cyan.svg?longCache=true&style=for-the-badge" alt="Welcome" width="300px" align="middle"></p>

    <div class="intro">Greetings from:</div>
    <a href="https://ibb.co/du9CxJ"><img src="https://image.ibb.co/bMZecJ/lJeA3tgA.gif" alt="lJeA3tgA" border="0"></a>
    <div class="tagline">All-Star Dev | Code Fanatic | Linux Hacker | Cyber Security Professional</div>
    <!-- Find your icons from here - https://fontawesome.com/icons?d=gallery&s=brands -->
    <div class="icons-social">
      <a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i><div>Main</div></a>
      <!-- <a target="_blank" href="https://twitter.com/flexdinesh"><i class="fab fa-twitter"></i></a> -->
      <!-- <a target="_blank" href="https://Encrypted-Crack.g"><i class="fas fa-user"></i></a> -->
      <a target="_blank" href="https://www.linkedin.com/in/john-modica-228219b5" align="middle" title="LinkedIn" rel="nofollow"><i class="fab fa-linkedin"></i><div>LinkedIn</div></a>
      <a target="_blank" href="https://medium.com/@dmferreira/interview-with-cyber-threat-specialist-john-modica-d3708b235207" align="middle" title="Medium" rel="nofollow"><i class="fab fa-medium"></i><div>Medium</div></a>
      <a target="_blank" href="https://www.youtube.com/channel/UCAOxHOEpTxpwpmrwy5edWHg" align="middle" title="YouTube" rel="nofollow"><i class="fab fa-youtube"></i><div>Youtube</div></a>
      <a target="_blank" href="https://www.facebook.com/Cyber.S3C.Professional" align="middle" title="Facebook" rel="nofollow"><i class="fab fa-facebook-f"></i><div>Faceboot</div></a>
      <a target="_blank" href="https://DarkJpeg-Stego.github.io/" align="middle" title="DarkJpeg" rel="nofollow"><i class="fas fa-eye"></i><div>DarkJpeg</div></a>
      <a target="_blank" href="https://Encrypted-Crack.github.io/" align="middle" title="Encrypted Crack" rel="nofollow"><i class="fas fa-user-secret"></i><div>Encrypted-Crack</div></a>
      <a target="_blank" href="https://join.slack.com/t/officialcybernetixs3c/shared_invite/enQtNDA5MzIzMzg0OTk0LWNkOTI0N2MzMWJiZDMyYjA4NWI3ODhhNmNhZDdhNTIzY2YzMDFkY2NiMGIxM2FlOWVjYTJmMzRkZDA3Y2Y1MzM" align="middle" title="Slack" rel="nofollow"><i class="fab fa-slack"></i><div>Slack</div></a>
      <script type="text/javascript">
        var _sz = _sz || {};
        _sz.appId = "20dead96",
          function() {
            var e = document.createElement("script");
            e.src = "https://cdn.signalzen.com/signalzen.js", e.setAttribute("async", "true"), document.documentElement.firstChild.appendChild(e);
            var t = setInterval(function() {
              "undefined" != typeof SignalZen && (clearInterval(t), new SignalZen(_sz).load())
            }, 10)
          }();
      </script>
    </div>
  </main>
</body>

</html>

如何在不堆叠图标的情况下添加文本？

2 个答案: