FontAwsome и выравнивание текста - PullRequest
Новая
       22

FontAwsome и выравнивание текста

0 голосов
/ 09 апреля 2020

Поэтому я хочу, чтобы значок и текст выровнялись так, чтобы значок оставался слева, а весь текст - справа. Пожалуйста, посмотрите на что у меня есть , а я на то, что я хочу сделать .

С моими вы можете видеть, что вторая строка идет назад влево сторона. Где значок выше.

Вот код того, что у меня сейчас: 

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/74e8323267.js" crossorigin="anonymous"></script>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->

<div class="container">
  <div class="alert alert-warning">
    <i class="fas fa-exclamation fa-2x fa-fw"></i>&nbsp;<font size="4"><b>In observation of the holiday, LCS website will not have updated guidance on Friday, April 10, 2020. Guidance and updates will resume Monday, April 13, 2020.</font></b>
  </div>

</div>

</body>
</html>

1 Ответ

0 голосов
/ 09 апреля 2020

Если вы обновите свою версию bootstrap, вы сможете использовать ее свойства flex для достижения. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Кроме того, упаковка ваших элементов в свои div облегчит вам управление их расстоянием.

Если вы не хотите обновлять bootstrap, вы можете написать то же самое с CSS. 

.wrapping-div {
  display: flex;
  align-items: center;
}


<!DOCTYPE html>
<html lang="en">
<head>
<!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/74e8323267.js" crossorigin="anonymous"></script>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->

  <div class="container">
    <div class="alert alert-warning d-flex align-items-center">
      <div>
        <i class="fas fa-exclamation fa-2x fa-fw"></i>
      </div>
      <div>
       <font size="4"><b>In observation of the holiday, LCS website will not have updated guidance on Friday, April 10, 2020. Guidance and updates will resume Monday, April 13, 2020.</b></font>
      </div>
    </div>
  </div>

</body>
</html>
...