【bootstrap】ハンバーガーボタンの中のメニューについて

ハンバーガーボタンの中のメニューのみ、
文字の前に、glyhアイコンを追加表示したのですが、
どうすれば可能か教えてください。

行動規範の内容に同意します

回答1件

ベストアンサー

Glyphiconsをメニューの文字の前に追加するという動作は以下のように行えると思いますが、いかがでしょうか？contentプロパティで指定している文字コードはBootstrap Glyphicons v3.2.2 | Bootstrap Cheat Sheetsに載っています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7    <style type="text/css">
8        .navbar-header {
9            float: none;
10        }
11
12        .navbar-toggle {
13            display: block;
14        }
15
16        .navbar-collapse.collapse {
17            display: none !important;
18        }
19
20        .navbar-nav {
21            float: none !important;
22        }
23
24        .navbar-nav > li {
25            float: none;
26        }
27
28        .navbar-collapse.collapse.in {
29            display: block !important;
30        }
31
32        .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
33            transform: rotate(0deg);
34            top: 0;
35        }
36
37        .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
38            opacity: 1;
39            width: 100%;
40            margin-left: 0;
41        }
42
43        .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
44            transform: rotate(0deg);
45            bottom: 0;
46        }
47
48        .navbar .navbar-toggle .icon-bar {
49            position: relative;
50            transition: all 200ms ease-in-out;
51        }
52
53        .navbar .navbar-toggle .icon-bar:nth-of-type(1) {
54            transform: rotate(45deg);
55            top: 6px;
56        }
57
58        .navbar .navbar-toggle .icon-bar:nth-of-type(2) {
59            opacity: 0;
60            width: 0;
61            margin-left: 50%;
62        }
63
64        .navbar .navbar-toggle .icon-bar:nth-of-type(3) {
65            transform: rotate(-45deg);
66            bottom: 6px;
67        }
68
69        .navbar-nav > li > a:before {
70            font-family: "Glyphicons Halflings", sans-serif;
71            content: "\2a";
72        }
73    </style>
74</head>
75<body>
76<div class="navbar navbar-default navbar-fixed-top">
77    <div class="navbar-header">
78        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav">
79            <span class="icon-bar"></span>
80            <span class="icon-bar"></span>
81            <span class="icon-bar"></span>
82        </button>
83        <a class="navbar-brand" href="#">テキスト</a>
84    </div>
85    <div id="main-nav" class="navbar-collapse collapse">
86        <ul class="nav navbar-nav">
87            <li class="active"><a href="#">テキスト</a></li>
88            <li><a href="#">テキスト</a></li>
89            <li><a href="#">テキスト</a></li>
90        </ul>
91    </div>
92</div>
93<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
94<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
95</body>
96</html>

#追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7    <style type="text/css">
8        .navbar-header {
9            float: none;
10        }
11
12        .navbar-toggle {
13            display: block;
14        }
15
16        .navbar-collapse.collapse {
17            display: none !important;
18        }
19
20        .navbar-nav {
21            float: none !important;
22        }
23
24        .navbar-nav > li {
25            float: none;
26        }
27
28        .navbar-collapse.collapse.in {
29            display: block !important;
30        }
31
32        .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
33            transform: rotate(0deg);
34            top: 0;
35        }
36
37        .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
38            opacity: 1;
39            width: 100%;
40            margin-left: 0;
41        }
42
43        .navbar .navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
44            transform: rotate(0deg);
45            bottom: 0;
46        }
47
48        .navbar .navbar-toggle .icon-bar {
49            position: relative;
50            transition: all 200ms ease-in-out;
51        }
52
53        .navbar .navbar-toggle .icon-bar:nth-of-type(1) {
54            transform: rotate(45deg);
55            top: 6px;
56        }
57
58        .navbar .navbar-toggle .icon-bar:nth-of-type(2) {
59            opacity: 0;
60            width: 0;
61            margin-left: 50%;
62        }
63
64        .navbar .navbar-toggle .icon-bar:nth-of-type(3) {
65            transform: rotate(-45deg);
66            bottom: 6px;
67        }
68
69        .text1 > a:before {
70            font-family: "Glyphicons Halflings", sans-serif;
71            content: "\e162";
72        }
73
74        .text2 > a:before {
75            font-family: "Glyphicons Halflings", sans-serif;
76            content: "\e005";
77        }
78
79        .text3 > a:before {
80            font-family: "Glyphicons Halflings", sans-serif;
81            content: "\e104";
82        }
83    </style>
84</head>
85<body>
86<div class="navbar navbar-default navbar-fixed-top">
87    <div class="navbar-header">
88        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav">
89            <span class="icon-bar"></span>
90            <span class="icon-bar"></span>
91            <span class="icon-bar"></span>
92        </button>
93        <a class="navbar-brand" href="#">テキスト</a>
94    </div>
95    <div id="main-nav" class="navbar-collapse collapse">
96        <ul class="nav navbar-nav">
97            <li class="active text1"><a href="#">テキスト</a></li>
98            <li class="text2"><a href="#">テキスト</a></li>
99            <li class="text3"><a href="#">テキスト</a></li>
100        </ul>
101    </div>
102</div>
103<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
104<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
105</body>
106</html>