如何在标题栏上对齐FA图标和文本？

时间：2018-01-30 14:49:43

标签： html css font-awesome

我想知道如何将fa-icon容器与我用作标题栏的文本对齐。

这是我希望如何完成它的“理想”结果。 [理想的外观只是一个图像] [1]

这是我的代码，看起来不像：

 */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}
<html lang="en">
   <!-- falconer site v2 -->
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>Falconer Aviation - Licencia Piloto Privado de Avión</title>
      <!-- Bootstrap Core CSS -->
      <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <!-- Custom Fonts -->
      <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
      <!-- Custom CSS -->
      <link href="../css/cursos.css" rel="stylesheet">
   </head>
   <body>
      <section id="services" class="services bg-primary text-white">
         <div class="container">
            <div class="section group">
               <div class="col span_1_of_2">
                  <div class="col-xs-6 col-md-2">
                     <div class="service-item">
                        <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-paper-plane fa-stack-1x text-primary"></i>
                        </span>
                     </div>
                  </div>
               </div>
               <div class="col span_1_of_2">
                  <h5>
                     <p align="left"><strong>Licencia Piloto Privado de Avión</strong></p>
                  </h5>
               </div>
            </div>
         </div>
         <!-- /.container -->
      </section>
      <div>

This is how it actually looks like:[Actual look][2]

Basically I just want the airplane icon on the left, and right next to it the text.

Any idea on how to align the fa-icon on the blue top bar?


  [1]: https://i.stack.imgur.com/kXgLG.png
  [2]: https://i.stack.imgur.com/YfDsO.jpg

Edit: adding CSS used: 
bootstrap.min.css

<!-- begin snippet: js hide: false console: true babel: false -->

cursos.css 

/*!
 * Start Bootstrap - Stylish Portfolio (https://startbootstrap.com/template-overviews/stylish-portfolio)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/blob/master/LICENSE)
 */

/* Global Styles */

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.text-vertical-center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.text-vertical-center h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
}


/* Custom Button Styles */

.btn-dark {
  color: #fff;
  border: none;
  border-radius: 0;
  background-color: rgba(0, 0, 0, .4);
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  color: #fff;
  background-color: rgba(0, 0, 0, .7);
}

.btn-light {
  color: #333;
  border: none;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
}

.btn-light:hover, .btn-light:focus, .btn-light:active {
  color: #333;
  background-color: rgba(255, 255, 255, .8);
}


/* Custom Horizontal Rule */

hr.small {
  max-width: 100px;
}


/* Side Menu */

#sidebar-wrapper {
  position: fixed;
  z-index: 1000;
  right: 0;
  overflow-y: auto;
  width: 250px;
  height: 100%;
  -webkit-transition: all .4s ease 0s;
  -moz-transition: all .4s ease 0s;
  -ms-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  transform: translateX(250px);
  background: #222;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  font-size: 18px;
  line-height: 55px;
  height: 55px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#menu-toggle {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
}

#sidebar-wrapper.active {
  right: 250px;
  width: 250px;
  -webkit-transition: all .4s ease 0s;
  -moz-transition: all .4s ease 0s;
  -ms-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
}

.toggle {
  font-size: 1em;
  margin: 5px 5px 0 0;
  padding: 15px 20px;
}


/* Header */

.header {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* About */

.about {
  padding: 50px 0;
}


/* Services */

.services {
  padding: 10px 0;
}

.service-item {
  margin-bottom: 10px;
}





/* Footer */

footer {
  padding: 20px 0;
}

#to-top {
  font-size: 1em;
  position: fixed;
  right: 5px;
  bottom: 5px;
  display: none;
  padding: 15px 20px;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

2 个答案:

答案 0 :(得分：0)

你没有发布你的CSS，但这里有一些html＆amp; css我会告诉你应该工作正常。你需要正确添加它。

HTML：

<div id="topbar">
  <div class="barcol>
    <!--The fa icon here.-->
  </div>
  <div class="barcol>
    <div class="barcol-row">Some text</div>
    <div class="barcol-row">Some text</div>
  </div>
</div>

CSS：

#topbar {
  display: flex;
}

其他造型由您决定。这只是我为你快速制作的简单结构，我希望你能理解它，这对你来说很好。 ：）

答案 1 :(得分：0)

由于您使用的是Bootstrap 4，它使用灵活的盒子布局模块。 您可以使用align-items属性控制列内容对齐。 注意：它仅适用于flexi-box网格。

检查我创建的小提琴。 https://jsfiddle.net/qdktejak/1/

有关更多align-items属性值，请参阅https://css-tricks.com/almanac/properties/a/align-items/以供参考。

相关问题
最新问题