как использовать иконки fa в bootstrap карточке? - PullRequest
Новая
       0

как использовать иконки fa в bootstrap карточке?

0 голосов
/ 27 февраля 2020

Я реализовал карту bootstrap, и в области тела карты у меня есть список, что мне нужно сделать, это разместить красивые значки вместо маркеров по умолчанию перед моими тегами p, но это не похоже на работу.

Вот мой код: 

<div class="card mb-3" style="border-left: 6px solid #ffc200; ">
    <div class="card-header"><b>Smart Band with Gesture Control</b></div>
        <div class="card-body">
           <h6 class="card-subtitle mb-2 text-muted">Arduino Uno + Android app</h6>
           <ul class="fa-ul">
               <li><span class="fa-li"><i class="fa fa-circle"></i></span><p class="card-text">Wearable smart band</p></li>
               <li><span class="fa-li"><i class="fas fa-check-square"></i></span><p class="card-text">control smartphone with simple hand gesture</p></li>
               <li><span class="fa-li"><i class="fas fa-check-square"></i></span><p class="card-text">Heartbeat & temparature measurement</p></li>
           </ul>
       </div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

В основном это нормально, вам просто нужно изменить fas fa-check-square на fa fa-check-square и, конечно, ссылку на потрясающие ресурсы. 

<!DOCTYPE html>  
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="card mb-3" style="border-left: 6px solid #ffc200; ">
<div class="card-header"><b>Smart Band with Gesture Control</b></div>
    <div class="card-body">
       <h6 class="card-subtitle mb-2 text-muted">Arduino Uno + Android app</h6>
       <ul class="fa-ul">
           <li><span class="fa-li"><i class="fa fa-circle"></i></span><p class="card-text">Wearable smart band</p></li>
           <li><span class="fa-li"><i class="fa fa-check-square"></i></span><p class="card-text">control smartphone with simple hand gesture</p></li>
           <li><span class="fa-li"><i class="fa fa-check-square"></i></span><p class="card-text">Heartbeat & temparature measurement</p></li>
       </ul>
   </div>
</div>
</div>
</body>
</html>
0 голосов
/ 27 февраля 2020

Я бы не использовал тег <p> в списке, если вы не поместите в него все. В противном случае это создаст новую линию. На этой странице FontAwesome обсуждается лучший способ создания списков - https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

Если вам нужен еще один значок с маркером, прежде чем просто добавить отдельный значок перед первым, добавив еще один <i class="fa fa-class"></i> (независимо от того, значок класса, который вы хотите использовать ...) раньше (проверьте, хотите ли вы, чтобы теги <span> располагались вокруг первого <i></i> вместо второго).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...