GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update iconfont page style

pull/12/head
afc163 10 years ago
parent
809c6288db
commit
5a0c7977f0
2 changed files with 143 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 284
      components/iconfont/index.md
  2. 6
      static/style.css

284
components/iconfont/index.md
View File

@ -3,6 +3,7 @@
- category: CSS
- chinese: 字体图标
- order: 1
- nodemos: true
---
@ -14,8 +15,6 @@
<span class="anticon anticon-link"></span>
```
**注**: 通过覆盖 @iconfont-css-prefix 即可修改 icon 基类。
## 图标列表
### 一：方向性图标
@ -23,107 +22,107 @@
<ul class="row anticons-list fn-clear">
<li>
<span class="anticon anticon-step-backward"></span>
<span class="anticon-class">anticon anticon-step-backward</span>
<span class="anticon-class">anticon-step-backward</span>
</li>
<li>
<span class="anticon anticon-step-forward"></span>
<span class="anticon-class">anticon anticon-step-forward</span>
<span class="anticon-class">anticon-step-forward</span>
</li>
<li>
<span class="anticon anticon-fast-backward"></span>
<span class="anticon-class">anticon anticon-fast-backward</span>
<span class="anticon-class">anticon-fast-backward</span>
</li>
<li>
<span class="anticon anticon-fast-forward"></span>
<span class="anticon-class">anticon anticon-fast-forward</span>
<span class="anticon-class">anticon-fast-forward</span>
</li>
<li>
<span class="anticon anticon-shrink"></span>
<span class="anticon-class">anticon anticon-shrink</span>
<span class="anticon-class">anticon-shrink</span>
</li>
<li>
<span class="anticon anticon-arrow-salt"></span>
<span class="anticon-class">anticon anticon-arrow-salt</span>
<span class="anticon-class">anticon-arrow-salt</span>
</li>
<li>
<span class="anticon anticon-caret-down"></span>
<span class="anticon-class">anticon anticon-caret-down</span>
<span class="anticon-class">anticon-caret-down</span>
</li>
<li>
<span class="anticon anticon-caret-up"></span>
<span class="anticon-class">anticon anticon-caret-up</span>
<span class="anticon-class">anticon-caret-up</span>
</li>
<li>
<span class="anticon anticon-caret-left"></span>
<span class="anticon-class">anticon anticon-caret-left</span>
<span class="anticon-class">anticon-caret-left</span>
</li>
<li>
<span class="anticon anticon-caret-right"></span>
<span class="anticon-class">anticon anticon-caret-right</span>
<span class="anticon-class">anticon-caret-right</span>
</li>
<li>
<span class="anticon anticon-caret-circle-right"></span>
<span class="anticon-class">anticon anticon-caret-circle-right</span>
<span class="anticon-class">anticon-caret-circle-right</span>
</li>
<li>
<span class="anticon anticon-caret-circle-left"></span>
<span class="anticon-class">anticon anticon-caret-circle-left</span>
<span class="anticon-class">anticon-caret-circle-left</span>
</li>
<li>
<span class="anticon anticon-caret-circleo-right"></span>
<span class="anticon-class">anticon anticon-caret-circleo-right</span>
<span class="anticon-class">anticon-caret-circleo-right</span>
</li>
<li>
<span class="anticon anticon-caret-circleo-left"></span>
<span class="anticon-class">anticon anticon-caret-circleo-left</span>
<span class="anticon-class">anticon-caret-circleo-left</span>
</li>
<li>
<span class="anticon anticon-angle-circle-right"></span>
<span class="anticon-class">anticon anticon-angle-circle-right</span>
<span class="anticon-class">anticon-angle-circle-right</span>
</li>
<li>
<span class="anticon anticon-angle-circle-left"></span>
<span class="anticon-class">anticon anticon-angle-circle-left</span>
<span class="anticon-class">anticon-angle-circle-left</span>
</li>
<li>
<span class="anticon anticon-angle-circleo-right"></span>
<span class="anticon-class">anticon anticon-angle-circleo-right</span>
<span class="anticon-class">anticon-angle-circleo-right</span>
</li>
<li>
<span class="anticon anticon-angle-circleo-left"></span>
<span class="anticon-class">anticon anticon-angle-circleo-left</span>
<span class="anticon-class">anticon-angle-circleo-left</span>
</li>
<li>
<span class="anticon anticon-angle-double-right"></span>
<span class="anticon-class">anticon anticon-angle-double-right</span>
<span class="anticon-class">anticon-angle-double-right</span>
</li>
<li>
<span class="anticon anticon-angle-double-left"></span>
<span class="anticon-class">anticon anticon-angle-double-left</span>
<span class="anticon-class">anticon-angle-double-left</span>
</li>
<li>
<span class="anticon anticon-angle-verticle-right"></span>
<span class="anticon-class">anticon anticon-angle-verticle-right</span>
<span class="anticon-class">anticon-angle-verticle-right</span>
</li>
<li>
<span class="anticon anticon-angle-verticle-left"></span>
<span class="anticon-class">anticon anticon-angle-verticle-left</span>
<span class="anticon-class">anticon-angle-verticle-left</span>
</li>
<li>
<span class="anticon anticon-forward"></span>
<span class="anticon-class">anticon anticon-forward</span>
<span class="anticon-class">anticon-forward</span>
</li>
<li>
<span class="anticon anticon-backward"></span>
<span class="anticon-class">anticon anticon-backward</span>
<span class="anticon-class">anticon-backward</span>
</li>
<li>
<span class="anticon anticon-rollback"></span>
<span class="anticon-class">anticon anticon-rollback</span>
<span class="anticon-class">anticon-rollback</span>
</li>
<li>
<span class="anticon anticon-retweet"></span>
<span class="anticon-class">anticon anticon-retweet</span>
<span class="anticon-class">anticon-retweet</span>
</li>
</ul>
@ -132,107 +131,107 @@
<ul class="anticons-list fn-clear">
<li>
<span class="anticon anticon-question"></span>
<span class="anticon-class">anticon anticon-question</span>
<span class="anticon-class">anticon-question</span>
</li>
<li>
<span class="anticon anticon-question-circle"></span>
<span class="anticon-class">anticon anticon-question-circle</span>
<span class="anticon-class">anticon-question-circle</span>
</li>
<li>
<span class="anticon anticon-question-circleo"></span>
<span class="anticon-class">anticon anticon-question-circleo</span>
<span class="anticon-class">anticon-question-circleo</span>
</li>
<li>
<span class="anticon anticon-plus"></span>
<span class="anticon-class">anticon anticon-plus</span>
<span class="anticon-class">anticon-plus</span>
</li>
<li>
<span class="anticon anticon-plus-circle"></span>
<span class="anticon-class">anticon anticon-plus-circle</span>
<span class="anticon-class">anticon-plus-circle</span>
</li>
<li>
<span class="anticon anticon-plus-circleo"></span>
<span class="anticon-class">anticon anticon-plus-circleo</span>
<span class="anticon-class">anticon-plus-circleo</span>
</li>
<li>
<span class="anticon anticon-pause"></span>
<span class="anticon-class">anticon anticon-pause</span>
<span class="anticon-class">anticon-pause</span>
</li>
<li>
<span class="anticon anticon-pause-circle"></span>
<span class="anticon-class">anticon anticon-pause-circle</span>
<span class="anticon-class">anticon-pause-circle</span>
</li>
<li>
<span class="anticon anticon-pause-circleo"></span>
<span class="anticon-class">anticon anticon-pause-circleo</span>
<span class="anticon-class">anticon-pause-circleo</span>
</li>
<li>
<span class="anticon anticon-minus"></span>
<span class="anticon-class">anticon anticon-minus</span>
<span class="anticon-class">anticon-minus</span>
</li>
<li>
<span class="anticon anticon-minus-circle"></span>
<span class="anticon-class">anticon anticon-minus-circle</span>
<span class="anticon-class">anticon-minus-circle</span>
</li>
<li>
<span class="anticon anticon-minus-circleo"></span>
<span class="anticon-class">anticon anticon-minus-circleo</span>
<span class="anticon-class">anticon-minus-circleo</span>
</li>
<li>
<span class="anticon anticon-info-circle"></span>
<span class="anticon-class">anticon anticon-info-circle</span>
<span class="anticon-class">anticon-info-circle</span>
</li>
<li>
<span class="anticon anticon-info-circleo"></span>
<span class="anticon-class">anticon anticon-info-circleo</span>
<span class="anticon-class">anticon-info-circleo</span>
</li>
<li>
<span class="anticon anticon-info"></span>
<span class="anticon-class">anticon anticon-info</span>
<span class="anticon-class">anticon-info</span>
</li>
<li>
<span class="anticon anticon-exclamation"></span>
<span class="anticon-class">anticon anticon-exclamation</span>
<span class="anticon-class">anticon-exclamation</span>
</li>
<li>
<span class="anticon anticon-exclamation-circle"></span>
<span class="anticon-class">anticon anticon-exclamation-circle</span>
<span class="anticon-class">anticon-exclamation-circle</span>
</li>
<li>
<span class="anticon anticon-exclamation-circleo"></span>
<span class="anticon-class">anticon anticon-exclamation-circleo</span>
<span class="anticon-class">anticon-exclamation-circleo</span>
</li>
<li>
<span class="anticon anticon-cross-circleo"></span>
<span class="anticon-class">anticon anticon-cross-circleo</span>
<span class="anticon-class">anticon-cross-circleo</span>
</li>
<li>
<span class="anticon anticon-cross-circle"></span>
<span class="anticon-class">anticon anticon-cross-circle</span>
<span class="anticon-class">anticon-cross-circle</span>
</li>
<li>
<span class="anticon anticon-cross"></span>
<span class="anticon-class">anticon anticon-cross</span>
<span class="anticon-class">anticon-cross</span>
</li>
<li>
<span class="anticon anticon-check-circleo"></span>
<span class="anticon-class">anticon anticon-check-circleo</span>
<span class="anticon-class">anticon-check-circleo</span>
</li>
<li>
<span class="anticon anticon-check-circle"></span>
<span class="anticon-class">anticon anticon-check-circle</span>
<span class="anticon-class">anticon-check-circle</span>
</li>
<li>
<span class="anticon anticon-check"></span>
<span class="anticon-class">anticon anticon-check</span>
<span class="anticon-class">anticon-check</span>
</li>
<li>
<span class="anticon anticon-clock-circle"></span>
<span class="anticon-class">anticon anticon-clock-circle</span>
<span class="anticon-class">anticon-clock-circle</span>
</li>
<li>
<span class="anticon anticon-clock-circleo"></span>
<span class="anticon-class">anticon anticon-clock-circleo</span>
<span class="anticon-class">anticon-clock-circleo</span>
</li>
</ul>
@ -241,266 +240,267 @@
<ul class="anticons-list fn-clear">
<li>
<span class="anticon anticon-lock"></span>
<span class="anticon-class">anticon anticon-lock</span>
<span class="anticon-class">anticon-lock</span>
</li>
<li>
<span class="anticon anticon-android"></span>
<span class="anticon-class">anticon anticon-android</span>
<span class="anticon-class">anticon-android</span>
</li>
<li>
<span class="anticon anticon-apple"></span>
<span class="anticon-class">anticon anticon-apple</span>
<span class="anticon-class">anticon-apple</span>
</li>
<li>
<span class="anticon anticon-area-chart"></span>
<span class="anticon-class">anticon anticon-area-chart</span>
<span class="anticon-class">anticon-area-chart</span>
</li>
<li>
<span class="anticon anticon-bar-chart"></span>
<span class="anticon-class">anticon anticon-bar-chart</span>
<span class="anticon-class">anticon-bar-chart</span>
</li>
<li>
<span class="anticon anticon-bars"></span>
<span class="anticon-class">anticon anticon-bars</span>
<span class="anticon-class">anticon-bars</span>
</li>
<li>
<span class="anticon anticon-booko"></span>
<span class="anticon-class">anticon anticon-booko</span>
<span class="anticon-class">anticon-booko</span>
</li>
<li>
<span class="anticon anticon-calendar"></span>
<span class="anticon-class">anticon anticon-calendar</span>
<span class="anticon-class">anticon-calendar</span>
</li>
<li>
<span class="anticon anticon-cloud"></span>
<span class="anticon-class">anticon anticon-cloud</span>
<span class="anticon-class">anticon-cloud</span>
</li>
<li>
<span class="anticon anticon-cloud-download"></span>
<span class="anticon-class">anticon anticon-cloud-download</span>
<span class="anticon-class">anticon-cloud-download</span>
</li>
<li>
<span class="anticon anticon-code"></span>
<span class="anticon-class">anticon anticon-code</span>
<span class="anticon-class">anticon-code</span>
</li>
<li>
<span class="anticon anticon-copy"></span>
<span class="anticon-class">anticon anticon-copy</span>
<span class="anticon-class">anticon-copy</span>
</li>
<li>
<span class="anticon anticon-credit-card"></span>
<span class="anticon-class">anticon anticon-credit-card</span>
<span class="anticon-class">anticon-credit-card</span>
</li>
<li>
<span class="anticon anticon-delete"></span>
<span class="anticon-class">anticon anticon-delete</span>
<span class="anticon-class">anticon-delete</span>
</li>
<li>
<span class="anticon anticon-desktop"></span>
<span class="anticon-class">anticon anticon-desktop</span>
<span class="anticon-class">anticon-desktop</span>
</li>
<li>
<span class="anticon anticon-download-line"></span>
<span class="anticon-class">anticon anticon-download-line</span>
<span class="anticon-class">anticon-download-line</span>
</li>
<li>
<span class="anticon anticon-edit"></span>
<span class="anticon-class">anticon anticon-edit</span>
<span class="anticon-class">anticon-edit</span>
</li>
<li>
<span class="anticon anticon-ellipsis"></span>
<span class="anticon-class">anticon anticon-ellipsis</span>
<span class="anticon-class">anticon-ellipsis</span>
</li>
<li>
<span class="anticon anticon-environment"></span>
<span class="anticon-class">anticon anticon-environment</span>
<span class="anticon-class">anticon-environment</span>
</li>
<li>
<span class="anticon anticon-fileo"></span>
<span class="anticon-class">anticon anticon-fileo</span>
<span class="anticon-class">anticon-fileo</span>
</li>
<li>
<span class="anticon anticon-file-texto"></span>
<span class="anticon-class">anticon anticon-file-texto</span>
<span class="anticon-class">anticon-file-texto</span>
</li>
<li>
<span class="anticon anticon-foldero"></span>
<span class="anticon-class">anticon anticon-foldero</span>
<span class="anticon-class">anticon-foldero</span>
</li>
<li>
<span class="anticon anticon-folder-openo"></span>
<span class="anticon-class">anticon anticon-folder-openo</span>
<span class="anticon-class">anticon-folder-openo</span>
</li>
<li>
<span class="anticon anticon-github"></span>
<span class="anticon-class">anticon anticon-github</span>
<span class="anticon-class">anticon-github</span>
</li>
<li>
<span class="anticon anticon-hddo"></span>
<span class="anticon-class">anticon anticon-hddo</span>
<span class="anticon-class">anticon-hddo</span>
</li>
<li>
<span class="anticon anticon-frown"></span>
<span class="anticon-class">anticon anticon-frown</span>
<span class="anticon-class">anticon-frown</span>
</li>
<li>
<span class="anticon anticon-meho"></span>
<span class="anticon-class">anticon anticon-meho</span>
<span class="anticon-class">anticon-meho</span>
</li>
<li>
<span class="anticon anticon-inbox"></span>
<span class="anticon-class">anticon anticon-inbox</span>
<span class="anticon-class">anticon-inbox</span>
</li>
<li>
<span class="anticon anticon-laptop"></span>
<span class="anticon-class">anticon anticon-laptop</span>
<span class="anticon-class">anticon-laptop</span>
</li>
<li>
<span class="anticon anticon-large"></span>
<span class="anticon-class">anticon anticon-large</span>
<span class="anticon-class">anticon-large</span>
</li>
<li>
<span class="anticon anticon-line-chart"></span>
<span class="anticon-class">anticon anticon-line-chart</span>
<span class="anticon-class">anticon-line-chart</span>
</li>
<li>
<span class="anticon anticon-link"></span>
<span class="anticon-class">anticon anticon-link</span>
<span class="anticon-class">anticon-link</span>
</li>
<li>
<span class="anticon anticon-lock1"></span>
<span class="anticon-class">anticon anticon-lock1</span>
<span class="anticon-class">anticon-lock1</span>
</li>
<li>
<span class="anticon anticon-logout"></span>
<span class="anticon-class">anticon anticon-logout</span>
<span class="anticon-class">anticon-logout</span>
</li>
<li>
<span class="anticon anticon-mail"></span>
<span class="anticon-class">anticon anticon-mail</span>
<span class="anticon-class">anticon-mail</span>
</li>
<li>
<span class="anticon anticon-menu-fold"></span>
<span class="anticon-class">anticon anticon-menu-fold</span>
<span class="anticon-class">anticon-menu-fold</span>
</li>
<li>
<span class="anticon anticon-menu-unfold"></span>
<span class="anticon-class">anticon anticon-menu-unfold</span>
<span class="anticon-class">anticon-menu-unfold</span>
</li>
<li>
<span class="anticon anticon-mobile"></span>
<span class="anticon-class">anticon anticon-mobile</span>
<span class="anticon-class">anticon-mobile</span>
</li>
<li>
<span class="anticon anticon-notification"></span>
<span class="anticon-class">anticon anticon-notification</span>
<span class="anticon-class">anticon-notification</span>
</li>
<li>
<span class="anticon anticon-paper-clip"></span>
<span class="anticon-class">anticon anticon-paper-clip</span>
<span class="anticon-class">anticon-paper-clip</span>
</li>
<li>
<span class="anticon anticon-pictureo"></span>
<span class="anticon-class">anticon anticon-pictureo</span>
<span class="anticon-class">anticon-pictureo</span>
</li>
<li>
<span class="anticon anticon-pie-chart"></span>
<span class="anticon-class">anticon anticon-pie-chart</span>
<span class="anticon-class">anticon-pie-chart</span>
</li>
<li>
<span class="anticon anticon-poweroff"></span>
<span class="anticon-class">anticon anticon-poweroff</span>
<span class="anticon-class">anticon-poweroff</span>
</li>
<li>
<span class="anticon anticon-reload"></span>
<span class="anticon-class">anticon anticon-reload</span>
<span class="anticon-class">anticon-reload</span>
</li>
<li>
<span class="anticon anticon-search"></span>
<span class="anticon-class">anticon anticon-search</span>
<span class="anticon-class">anticon-search</span>
</li>
<li>
<span class="anticon anticon-setting"></span>
<span class="anticon-class">anticon anticon-setting</span>
<span class="anticon-class">anticon-setting</span>
</li>
<li>
<span class="anticon anticon-share-alt"></span>
<span class="anticon-class">anticon anticon-share-alt</span>
<span class="anticon-class">anticon-share-alt</span>
</li>
<li>
<span class="anticon anticon-shopping-cart"></span>
<span class="anticon-class">anticon anticon-shopping-cart</span>
<span class="anticon-class">anticon-shopping-cart</span>
</li>
<li>
<span class="anticon anticon-smile"></span>
<span class="anticon-class">anticon anticon-smile</span>
<span class="anticon-class">anticon-smile</span>
</li>
<li>
<span class="anticon anticon-tablet"></span>
<span class="anticon-class">anticon anticon-tablet</span>
<span class="anticon-class">anticon-tablet</span>
</li>
<li>
<span class="anticon anticon-tag"></span>
<span class="anticon-class">anticon anticon-tag</span>
<span class="anticon-class">anticon-tag</span>
</li>
<li>
<span class="anticon anticon-tags"></span>
<span class="anticon-class">anticon anticon-tags</span>
<span class="anticon-class">anticon-tags</span>
</li>
<li>
<span class="anticon anticon-totop"></span>
<span class="anticon-class">anticon anticon-totop</span>
<span class="anticon-class">anticon-totop</span>
</li>
<li>
<span class="anticon anticon-unlock"></span>
<span class="anticon-class">anticon anticon-unlock</span>
<span class="anticon-class">anticon-unlock</span>
</li>
<li>
<span class="anticon anticon-upload"></span>
<span class="anticon-class">anticon anticon-upload</span>
<span class="anticon-class">anticon-upload</span>
</li>
<li>
<span class="anticon anticon-user"></span>
<span class="anticon-class">anticon anticon-user</span>
<span class="anticon-class">anticon-user</span>
</li>
<li>
<span class="anticon anticon-video-camera"></span>
<span class="anticon-class">anticon anticon-video-camera</span>
<span class="anticon-class">anticon-video-camera</span>
</li>
<li>
<span class="anticon anticon-windows"></span>
<span class="anticon-class">anticon anticon-windows</span>
<span class="anticon-class">anticon-windows</span>
</li>
</ul>
<style>
ul.anticons-list {
margin: 20px 0;
list-style: none;
width: 100%
}
ul.anticons-list li{
float: left;
margin: 5px;
padding-top: 5px;
width: 150px;
height: 70px;
text-align: center;
list-style: none;
cursor: pointer;
}
ul.anticons-list li:hover {
background-color: #6EB4E0;
color: #FFF;
border-radius: 4px;
}
.anticon {
font-size: 28px;
}
.anticon-class {
display: block;
text-align: center;
word-wrap: break-word;
font-size: 10px;
tranform: scale(0.83);
}
ul.anticons-list {
margin: 20px 0;
list-style: none;
width: 100%
}
ul.anticons-list li{
float: left;
margin: 5px;
padding-bottom: 10px;
width: 160px;
text-align: center;
list-style: none;
cursor: pointer;
height: 88px;
}
ul.anticons-list li:hover {
background-color: #6EB4E0;
color: #FFF;
border-radius: 4px;
}
.anticon {
font-size: 28px;
line-height: 48px;
}
.anticon-class {
display: block;
text-align: center;
word-wrap: break-word;
transform: scale(0.85);
font-family: Consolas;
}
</style>

6
static/style.css
View File

@ -515,17 +515,13 @@ footer ul li > a {
font-size: 14px;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #5C6B77;
}
.markdown h2 {
margin: 2.5em 0 1em 0;
margin: 1.8em 0 1em 0;
}
.markdown p,

Write Preview
Loading…
Cancel
Save