HTML CSS Упражнение: используйте потрясающие векторные иконки шрифта с bootstrap3

Последнее обновление 01 декабря 2018 10:43:05 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Решение:

HTML-код:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - Use Font Awesome Vector Icons with Bootstrap 3</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
</div>
</div>
</div>
</body>
</html>

Демонстрация в реальном времени:

См. Pen -font-awesome-vector-icons-with-bootstrap3-answer от пользователя w3resource ( @ w3resource ) в CodePen .

Поддерживаемый браузер


да	да	да	да	да