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

This commit is contained in:
Argo-Lenovo 2016-10-25 01:20:58 +08:00
parent f38ffa51be
commit 2f7bb03626
7 changed files with 2099 additions and 1014 deletions

View File

@ -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>

View File

@ -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%;
}
}

View File

@ -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');
});

View File

@ -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>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff