Question

我是一名新的网页设计师，我现在正在努力设计一个带有适当图标的自举的响应式导航栏。 您能否告诉我以下菜单选项应使用哪些图标？

这是我的HTML代码：

<div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="#">
                                    <i class="glyphicon glyphicon-home"></i> Home</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Time Series</a></li>
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Place Order</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="dropdown-header">Nav header</li>
                                    <li><a href="#">Separated link</a></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
                <!--/.container-fluid -->
            </nav>

Answer 1

我第一次看到这样的请求。
你是设计师，你应该做任何你想做的事，不需要别人的建议。

但是既然你问了这个问题，你可以从这里开始：http://www.bootply.com/jePKaJ3ebg

<div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">
                                <i class="glyphicon glyphicon-home"></i> Home</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th"></i> Services</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Timeline</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i> Profile</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-inbox"></i> Place a Request</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> FAQ</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-info-sign"></i> About</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-wrench"></i> Admin <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-bullhorn"></i> Support <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->

正如我评论的那样，你可以使用Font Awesome Icons来获得更广泛的目录，而IMO它们的设计比Bootstrap的glyphicons更好。

如何使用正确的图标在Bootstrap中设计此Navbar？

1 个答案: