增加FontAwesome与Glyphicon两种图标选择视图

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -153,6 +153,7 @@
     <Content Include="Content\js\messages_zh.js" />
     <Content Include="Content\js\messages_zh.min.js" />
     <Content Include="Scripts\Groups.js" />
+    <Content Include="Scripts\icon.js" />
     <Content Include="Scripts\Login.js" />
     <Content Include="Scripts\Roles.js" />
     <Content Include="Scripts\Users.js" />
@@ -219,6 +220,7 @@
     <Content Include="Views\Admin\FAIcon.cshtml" />
     <Content Include="Views\Admin\Groups.cshtml" />
     <Content Include="Views\Admin\Roles.cshtml" />
+    <Content Include="Views\Shared\Glyphicons.cshtml" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>

Bootstrap.Admin/Content/css/fa.css

@@ -1,4 +1,8 @@
-.fontawesome-icon-list .fa-hover a {
+body {
+    padding-top: 16px;
+}
+
+.fontawesome-icon-list .fa-hover a {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -28,3 +32,46 @@
         font-size: 28px;
         vertical-align: -6px;
     }
+
+.fontawesome-icon-list ul {
+    display: block;
+    margin-left: -28px;
+}
+
+    .fontawesome-icon-list ul li {
+        overflow: hidden;
+        list-style: none;
+        float: left;
+        padding-left: 10px;
+        padding-right: 15px;
+        padding-top: 2px;
+        padding-bottom: 4px;
+        text-overflow: ellipsis;
+        line-height: 32px;
+        height: 32px;
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+        .fontawesome-icon-list ul li:hover {
+            background-color: #1d9d74;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+            .fontawesome-icon-list ul li:hover span:nth-child(1) {
+                font-size: 28px;
+                vertical-align: middle;
+            }
+
+        .fontawesome-icon-list ul li span:nth-child(1) {
+            margin-right: 10px;
+        }
+
+@media (max-width: 768px) {
+    .col-sm-6 {
+        width: 50%;
+    }
+}

Bootstrap.Admin/Scripts/icon.js

@@ -0,0 +1,12 @@
+$(function () {
+    $('.fontawesome-icon-list a').click(function () {
+        window.console.log($(this).children('i').attr('class'));
+        return false;
+    });
+
+    $('.fontawesome-icon-list ul li').click(function () {
+        window.console.log($(this).children('span:first').attr('class'));
+    });
+
+    $('.fontawesome-icon-list ul li').addClass('col-md-3 col-sm-4');
+});

Bootstrap.Admin/Views/Admin/FAIcon.cshtml

@@ -6,4 +6,22 @@
     <link href="~/Content/css/fa.css" rel="stylesheet" />
     <link href="~/Content/css/font-awesome.css" rel="stylesheet" />
 }
-@Html.Partial("AwesomeIcon")
+@section javascript {
+    <script src="~/Scripts/icon.js"></script>
+}
+<section class="container">
+    <section>
+        <div class="row">
+            <div class="col-lg-12">
+                <ul class="nav nav-tabs" role="tablist">
+                    <li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
+                    <li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
+                </ul>
+                <div class="tab-content">
+                    <div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
+                    <div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
+                </div>
+            </div>
+        </div>
+    </section>
+</section>