@ -0,0 +1,3 @@ |
||||
> 1% |
||||
last 2 versions |
||||
not ie <= 8 |
@ -0,0 +1,22 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
example.html |
||||
favicon.ico |
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw* |
@ -0,0 +1,6 @@ |
||||
{ |
||||
"tabWidth": 4, |
||||
"singleQuote": true, |
||||
"trailingComma": "none", |
||||
"printWidth": 140 |
||||
} |
@ -0,0 +1,21 @@ |
||||
MIT License |
||||
|
||||
Copyright (c) 2016-2019 vue-manage-system |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
@ -0,0 +1,197 @@ |
||||
# vue-manage-system |
||||
|
||||
<a href="https://github.com/vuejs/vue"> |
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> |
||||
</a> |
||||
<a href="https://github.com/ElemeFE/element"> |
||||
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui"> |
||||
</a> |
||||
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE"> |
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> |
||||
</a> |
||||
<a href="https://github.com/lin-xin/vue-manage-system/releases"> |
||||
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release"> |
||||
</a> |
||||
<a href="https://lin-xin.gitee.io/example/work/#/donate"> |
||||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> |
||||
</a> |
||||
|
||||
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/) |
||||
|
||||
> React + Ant Design 的版本正在开发中,仓库地址:[react-manage-system](https://github.com/lin-xin/react-manage-system) |
||||
|
||||
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md) |
||||
|
||||
## 项目截图 |
||||
|
||||
### 登录 |
||||
|
||||
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png) |
||||
|
||||
### 默认皮肤 |
||||
|
||||
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png) |
||||
|
||||
### 浅绿色皮肤 |
||||
|
||||
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png) |
||||
|
||||
## 赞赏 |
||||
|
||||
请作者喝杯咖啡吧!(微信号:linxin_20) |
||||
|
||||
![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg) |
||||
|
||||
## 特别鸣谢 |
||||
|
||||
- [实验楼](https://www.shiyanlou.com?source=vue-manage-system) |
||||
|
||||
## 前言 |
||||
|
||||
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 vue.js,使用 vue-cli3 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。 |
||||
|
||||
## 功能 |
||||
|
||||
- [x] Element UI |
||||
- [x] 登录/注销 |
||||
- [x] Dashboard |
||||
- [x] 表格 |
||||
- [x] Tab 选项卡 |
||||
- [x] 表单 |
||||
- [x] 图表 :bar_chart: |
||||
- [x] 富文本编辑器 |
||||
- [x] markdown 编辑器 |
||||
- [x] 图片拖拽/裁剪上传 |
||||
- [x] 支持切换主题色 :sparkles: |
||||
- [x] 列表拖拽排序 |
||||
- [x] 权限测试 |
||||
- [x] 404 / 403 |
||||
- [x] 三级菜单 |
||||
- [x] 自定义图标 |
||||
- [x] 可拖拽弹窗 |
||||
- [x] 国际化 |
||||
|
||||
## 安装步骤 |
||||
|
||||
``` |
||||
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地 |
||||
cd vue-manage-system // 进入模板目录 |
||||
npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn |
||||
|
||||
// 开启服务器,浏览器访问 http://localhost:8080 |
||||
npm run serve |
||||
|
||||
// 执行构建命令,生成的dist文件夹放在服务器下即可访问 |
||||
npm run build |
||||
``` |
||||
|
||||
## 组件使用说明与演示 |
||||
|
||||
### vue-schart |
||||
|
||||
vue.js 封装 sChart.js 的图表组件。访问地址:[vue-schart](https://github.com/linxin/vue-schart) |
||||
|
||||
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p> |
||||
|
||||
```html |
||||
<template> |
||||
<div> |
||||
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Schart from 'vue-schart'; // 导入Schart组件 |
||||
export default { |
||||
data() { |
||||
return { |
||||
options: { |
||||
type: 'bar', |
||||
title: { |
||||
text: '最近一周各品类销售图' |
||||
}, |
||||
labels: ['周一', '周二', '周三', '周四', '周五'], |
||||
datasets: [ |
||||
{ |
||||
label: '家电', |
||||
data: [234, 278, 270, 190, 230] |
||||
}, |
||||
{ |
||||
label: '百货', |
||||
data: [164, 178, 190, 135, 160] |
||||
}, |
||||
{ |
||||
label: '食品', |
||||
data: [144, 198, 150, 235, 120] |
||||
} |
||||
] |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
Schart |
||||
} |
||||
}; |
||||
</script> |
||||
<style> |
||||
.wrapper { |
||||
width: 7rem; |
||||
height: 5rem; |
||||
} |
||||
</style> |
||||
``` |
||||
|
||||
## 其他注意事项 |
||||
|
||||
### 一、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢? |
||||
|
||||
举个栗子,我不想用 Vue-Quill-Editor 这个组件,那我需要分四步走。 |
||||
|
||||
第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。 |
||||
|
||||
```JavaScript |
||||
{ |
||||
// 富文本编辑器组件 |
||||
path: '/editor', |
||||
component: resolve => require(['../components/page/VueEditor.vue'], resolve) |
||||
}, |
||||
``` |
||||
|
||||
第二步:删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。 |
||||
|
||||
第三步:删除该页面的入口。在目录 src/components/common/Sidebar.vue 中,找到该入口,删除下面这段代码。 |
||||
|
||||
```js |
||||
{ |
||||
index: 'editor', |
||||
title: '富文本编辑器' |
||||
}, |
||||
``` |
||||
|
||||
第四步:卸载该组件。执行以下命令: |
||||
npm un vue-quill-editor -S |
||||
|
||||
完成。 |
||||
|
||||
### 二、如何切换主题色呢? |
||||
|
||||
第一步:打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。 |
||||
|
||||
```javascript |
||||
import 'element-ui/lib/theme-default/index.css'; // 默认主题 |
||||
// import './assets/css/theme-green/index.css'; // 浅绿色主题 |
||||
``` |
||||
|
||||
第二步:打开 src/App.vue 文件,找到 style 标签引入样式的地方,切换成浅绿色主题。 |
||||
|
||||
```javascript |
||||
@import "./assets/css/main.css"; |
||||
@import "./assets/css/color-dark.css"; /*深色主题*/ |
||||
/*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/ |
||||
``` |
||||
|
||||
第三步:打开 src/components/common/Sidebar.vue 文件,找到 el-menu 标签,把 background-color/text-color/active-text-color 属性去掉即可。 |
||||
|
||||
## License |
||||
|
||||
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) |
@ -0,0 +1,196 @@ |
||||
# vue-manage-system |
||||
|
||||
<a href="https://github.com/vuejs/vue"> |
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> |
||||
</a> |
||||
<a href="https://github.com/ElemeFE/element"> |
||||
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui"> |
||||
</a> |
||||
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE"> |
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> |
||||
</a> |
||||
<a href="https://github.com/lin-xin/vue-manage-system/releases"> |
||||
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release"> |
||||
</a> |
||||
<a href="https://lin-xin.gitee.io/example/work/#/donate"> |
||||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> |
||||
</a> |
||||
|
||||
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/) |
||||
|
||||
## Donation |
||||
|
||||
![WeChat](https://lin-xin.gitee.io/images/weixin.jpg) |
||||
|
||||
## Preface |
||||
|
||||
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color. |
||||
|
||||
## Function |
||||
|
||||
- [x] Element-UI |
||||
- [x] Login/Logout |
||||
- [x] Dashboard |
||||
- [x] Table |
||||
- [x] Tabs |
||||
- [x] From |
||||
- [x] Chart :bar_chart: |
||||
- [x] Editor |
||||
- [x] Markdown |
||||
- [x] Upload pictures by clipping or dragging |
||||
- [x] Support manual switch themes :sparkles: |
||||
- [x] List drag sort |
||||
- [x] Permission |
||||
- [x] 404 / 403 |
||||
- [x] Three level menu |
||||
- [x] Custom icon |
||||
|
||||
## Installation steps |
||||
|
||||
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates |
||||
cd vue-manage-system // Enter template directory |
||||
npm install // Installation dependency |
||||
|
||||
## Local development |
||||
|
||||
// Open server and access http://localhost:8080 in browser |
||||
npm run serve |
||||
|
||||
## Constructing production |
||||
|
||||
// Constructing project |
||||
npm run build |
||||
|
||||
## Component description and presentation |
||||
|
||||
### vue-schart |
||||
|
||||
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart) |
||||
|
||||
```html |
||||
<template> |
||||
<div> |
||||
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Schart from 'vue-schart'; // 导入Schart组件 |
||||
export default { |
||||
data() { |
||||
return { |
||||
options: { |
||||
type: 'bar', |
||||
title: { |
||||
text: '最近一周各品类销售图' |
||||
}, |
||||
labels: ['周一', '周二', '周三', '周四', '周五'], |
||||
datasets: [ |
||||
{ |
||||
label: '家电', |
||||
data: [234, 278, 270, 190, 230] |
||||
}, |
||||
{ |
||||
label: '百货', |
||||
data: [164, 178, 190, 135, 160] |
||||
}, |
||||
{ |
||||
label: '食品', |
||||
data: [144, 198, 150, 235, 120] |
||||
} |
||||
] |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
Schart |
||||
} |
||||
}; |
||||
</script> |
||||
<style> |
||||
.wrapper { |
||||
width: 7rem; |
||||
height: 5rem; |
||||
} |
||||
</style> |
||||
``` |
||||
|
||||
### element-ui |
||||
|
||||
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout) |
||||
|
||||
### Vue-Quill-Editor |
||||
|
||||
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) |
||||
|
||||
### mavonEditor |
||||
|
||||
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor) |
||||
|
||||
### vue-cropperjs |
||||
|
||||
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs) |
||||
|
||||
## Notice |
||||
|
||||
### 一、If I don't want to use some components, how can I delete it? |
||||
|
||||
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps. |
||||
|
||||
The first step to remove the component of the routing. Enter 'src/router/index.js' and delete the code below. |
||||
|
||||
```JavaScript |
||||
{ |
||||
path: '/editor', |
||||
component: resolve => require(['../components/page/VueEditor.vue'], resolve) |
||||
}, |
||||
``` |
||||
|
||||
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file. |
||||
|
||||
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below. |
||||
|
||||
```js |
||||
{ |
||||
index: 'editor', |
||||
title: '富文本编辑器' |
||||
}, |
||||
``` |
||||
|
||||
Finally, uninstall this component. |
||||
npm un vue-quill-editor -S |
||||
|
||||
Complete! |
||||
|
||||
### 二、How to switch themes? |
||||
|
||||
The first step to enter 'src/main.js' and change into green theme. |
||||
|
||||
```javascript |
||||
import 'element-ui/lib/theme-default/index.css'; // default theme |
||||
// import '../static/css/theme-green/index.css'; // green theme |
||||
``` |
||||
|
||||
The second step to enter 'src/App.vue' and change into green theme. |
||||
|
||||
```javascript |
||||
@import "../static/css/main.css"; |
||||
@import "../static/css/color-dark.css"; /*深色主题*/ |
||||
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/ |
||||
``` |
||||
|
||||
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。 |
||||
|
||||
## Screenshot |
||||
|
||||
### Default theme |
||||
|
||||
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png) |
||||
|
||||
### Green theme |
||||
|
||||
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png) |
||||
|
||||
## License |
||||
|
||||
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) |
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/app' |
||||
] |
||||
} |
@ -0,0 +1,37 @@ |
||||
{ |
||||
"name": "vue-manage-system", |
||||
"version": "4.2.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"dev": "npm run serve", |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build" |
||||
}, |
||||
"dependencies": { |
||||
"axios": "^0.18.0", |
||||
"babel-polyfill": "^6.26.0", |
||||
"echarts": "^4.8.0", |
||||
"element-theme": "^2.0.1", |
||||
"element-ui": "^2.13.0", |
||||
"js-cookie": "^2.2.1", |
||||
"mavon-editor": "^2.6.17", |
||||
"postcss-px2rem": "^0.3.0", |
||||
"px2rem-loader": "^0.1.9", |
||||
"vue": "^2.6.10", |
||||
"vue-cropperjs": "^3.0.0", |
||||
"vue-i18n": "^8.10.0", |
||||
"vue-quill-editor": "^3.0.6", |
||||
"vue-router": "^3.0.3", |
||||
"vue-schart": "^2.0.0", |
||||
"vuedraggable": "^2.17.0", |
||||
"vuex": "^3.4.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "^3.9.0", |
||||
"@vue/cli-service": "^3.9.0", |
||||
"element-theme-chalk": "^2.13.0", |
||||
"node-sass": "^4.13.0", |
||||
"sass-loader": "^8.0.0", |
||||
"vue-template-compiler": "^2.6.10" |
||||
} |
||||
} |
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
autoprefixer: {} |
||||
} |
||||
} |
@ -0,0 +1,18 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||
<title>电子竞技在线教学资源管理平台</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
|
||||
</html> |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,35 @@ |
||||
<template> |
||||
<div id="app" > |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting'; |
||||
import util from '@/libs/util'; |
||||
export default { |
||||
name: 'App', |
||||
created () { |
||||
//在页面加载时读取sessionStorage里的状态信息 |
||||
if (util.session.get(Setting.storeKey) ) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(util.session.get(Setting.storeKey)))) |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||
window.addEventListener("beforeunload",()=>{ |
||||
util.session.get(Setting.usernameKey) && util.session.set(Setting.storeKey,JSON.stringify(this.$store.state)) |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
#app{ |
||||
} |
||||
@import "./assets/css/main.css"; |
||||
/* @import "./assets/css/color-dark.css"; */ |
||||
/*深色主题*/ |
||||
@import "./assets/css/theme-green/color-green.css"; |
||||
/* 浅绿色主题 */ |
||||
|
||||
</style> |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,28 @@ |
||||
.header{ |
||||
background-color: #242f42; |
||||
} |
||||
.login-wrap{ |
||||
background: #324157; |
||||
} |
||||
.plugins-tips{ |
||||
background: #eef1f6; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #20a0ff; |
||||
} |
||||
.el-upload--text em { |
||||
color: #20a0ff; |
||||
} |
||||
.pure-button{ |
||||
background: #20a0ff; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #cb221c; |
||||
background-color: #cb221c; |
||||
} |
||||
.message-title{ |
||||
color: #20a0ff; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: rgb(40,52,70); |
||||
} |
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时,垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
@ -0,0 +1,237 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">徽章,会员</div> |
||||
<div class="code-name">&#xe65f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">&#xe798;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">&#xe63a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> |
||||
<ul> |
||||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下:</p> |
||||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
||||
<div class="name"> |
||||
徽章,会员 |
||||
</div> |
||||
<div class="code-name">.icon-huizhanghuiyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huangguan"></span> |
||||
<div class="name"> |
||||
皇冠 |
||||
</div> |
||||
<div class="code-name">.icon-huangguan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-edu-line"></span> |
||||
<div class="name"> |
||||
学历 |
||||
</div> |
||||
<div class="code-name">.icon-edu-line |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比,具有如下特点:</p> |
||||
<ul> |
||||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下:</p> |
||||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
||||
</svg> |
||||
<div class="name">徽章,会员</div> |
||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huangguan"></use> |
||||
</svg> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">#icon-huangguan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-edu-line"></use> |
||||
</svg> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">#icon-edu-line</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> |
||||
<ul> |
||||
<li>支持多色图标了,不再受单色限制。</li> |
||||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下:</p> |
||||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,29 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1591082516626'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1591082516626#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1591082516626') format('woff'), |
||||
url('iconfont.ttf?t=1591082516626') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1591082516626#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-huizhanghuiyuan:before { |
||||
content: "\e65f"; |
||||
} |
||||
|
||||
.icon-huangguan:before { |
||||
content: "\e798"; |
||||
} |
||||
|
||||
.icon-edu-line:before { |
||||
content: "\e63a"; |
||||
} |
||||
|
@ -0,0 +1,30 @@ |
||||
{ |
||||
"id": "", |
||||
"name": "", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "444400", |
||||
"name": "徽章,会员", |
||||
"font_class": "huizhanghuiyuan", |
||||
"unicode": "e65f", |
||||
"unicode_decimal": 58975 |
||||
}, |
||||
{ |
||||
"icon_id": "4294111", |
||||
"name": "皇冠", |
||||
"font_class": "huangguan", |
||||
"unicode": "e798", |
||||
"unicode_decimal": 59288 |
||||
}, |
||||
{ |
||||
"icon_id": "6119296", |
||||
"name": "学历", |
||||
"font_class": "edu-line", |
||||
"unicode": "e63a", |
||||
"unicode_decimal": 58938 |
||||
} |
||||
] |
||||
} |
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时,垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
@ -0,0 +1,283 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">徽章,会员</div> |
||||
<div class="code-name">&#xe65f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学士帽</div> |
||||
<div class="code-name">&#xe663;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学习</div> |
||||
<div class="code-name">&#xe763;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">&#xe798;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">&#xe63a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> |
||||
<ul> |
||||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下:</p> |
||||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
||||
<div class="name"> |
||||
徽章,会员 |
||||
</div> |
||||
<div class="code-name">.icon-huizhanghuiyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-xueshimao"></span> |
||||
<div class="name"> |
||||
学士帽 |
||||
</div> |
||||
<div class="code-name">.icon-xueshimao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-xuexi"></span> |
||||
<div class="name"> |
||||
学习 |
||||
</div> |
||||
<div class="code-name">.icon-xuexi |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huangguan"></span> |
||||
<div class="name"> |
||||
皇冠 |
||||
</div> |
||||
<div class="code-name">.icon-huangguan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-edu-line"></span> |
||||
<div class="name"> |
||||
学历 |
||||
</div> |
||||
<div class="code-name">.icon-edu-line |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比,具有如下特点:</p> |
||||
<ul> |
||||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下:</p> |
||||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
||||
</svg> |
||||
<div class="name">徽章,会员</div> |
||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xueshimao"></use> |
||||
</svg> |
||||
<div class="name">学士帽</div> |
||||
<div class="code-name">#icon-xueshimao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xuexi"></use> |
||||
</svg> |
||||
<div class="name">学习</div> |
||||
<div class="code-name">#icon-xuexi</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huangguan"></use> |
||||
</svg> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">#icon-huangguan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-edu-line"></use> |
||||
</svg> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">#icon-edu-line</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> |
||||
<ul> |
||||
<li>支持多色图标了,不再受单色限制。</li> |
||||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下:</p> |
||||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,37 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1591084244863'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1591084244863#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1591084244863') format('woff'), |
||||
url('iconfont.ttf?t=1591084244863') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1591084244863#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-huizhanghuiyuan:before { |
||||
content: "\e65f"; |
||||
} |
||||
|
||||
.icon-xueshimao:before { |
||||
content: "\e663"; |
||||
} |
||||
|
||||
.icon-xuexi:before { |
||||
content: "\e763"; |
||||
} |
||||
|
||||
.icon-huangguan:before { |
||||
content: "\e798"; |
||||
} |
||||
|
||||
.icon-edu-line:before { |
||||
content: "\e63a"; |
||||
} |
||||
|
@ -0,0 +1,44 @@ |
||||
{ |
||||
"id": "", |
||||
"name": "", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "444400", |
||||
"name": "徽章,会员", |
||||
"font_class": "huizhanghuiyuan", |
||||
"unicode": "e65f", |
||||
"unicode_decimal": 58975 |
||||
}, |
||||
{ |
||||
"icon_id": "1495449", |
||||
"name": "学士帽", |
||||
"font_class": "xueshimao", |
||||
"unicode": "e663", |
||||
"unicode_decimal": 58979 |
||||
}, |
||||
{ |
||||
"icon_id": "4292658", |
||||
"name": "学习", |
||||
"font_class": "xuexi", |
||||
"unicode": "e763", |
||||
"unicode_decimal": 59235 |
||||
}, |
||||
{ |
||||
"icon_id": "4294111", |
||||
"name": "皇冠", |
||||
"font_class": "huangguan", |
||||
"unicode": "e798", |
||||
"unicode_decimal": 59288 |
||||
}, |
||||
{ |
||||
"icon_id": "6119296", |
||||
"name": "学历", |
||||
"font_class": "edu-line", |
||||
"unicode": "e63a", |
||||
"unicode_decimal": 58938 |
||||
} |
||||
] |
||||
} |
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,4 @@ |
||||
|
||||
[class*=" icon-"], [class^=icon-] { |
||||
font-family: iconfont!important; |
||||
} |
@ -0,0 +1,29 @@ |
||||
.header{ |
||||
background-color: #fff; |
||||
} |
||||
.login-wrap{ |
||||
background: rgba(56, 157, 170, 0.82);; |
||||
} |
||||
.plugins-tips{ |
||||
background: #f2f2f2; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #cb221c; |
||||
} |
||||
.el-upload--text em { |
||||
color: #cb221c; |
||||
} |
||||
.pure-button{ |
||||
background: #cb221c; |
||||
} |
||||
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||
background-color: #cb221c !important; |
||||
border-color: #cb221c !important; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #cb221c; |
||||
background-color: #cb221c; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: #cb221c; |
||||
} |
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时,垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
@ -0,0 +1,446 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1540265" target="_blank" class="nav-more">查看项目</a> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">已勾选32</div> |
||||
<div class="code-name">&#xe63d;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">未勾选32</div> |
||||
<div class="code-name">&#xe63e;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">未勾选40</div> |
||||
<div class="code-name">&#xe64a;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">已勾选40</div> |
||||
<div class="code-name">&#xe64b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">实 向右箭头-01</div> |
||||
<div class="code-name">&#xe626;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">实 向下箭头-01</div> |
||||
<div class="code-name">&#xe625;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">加号-填充</div> |
||||
<div class="code-name">&#xe72d;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">42指向上、上箭头</div> |
||||
<div class="code-name">&#xe769;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">44指向下、下箭头</div> |
||||
<div class="code-name">&#xe76b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">群蜂删除-充</div> |
||||
<div class="code-name">&#xe6e9;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">qq</div> |
||||
<div class="code-name">&#xe614;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">微信-36</div> |
||||
<div class="code-name">&#xe68a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> |
||||
<ul> |
||||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下:</p> |
||||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yigouxuan"></span> |
||||
<div class="name"> |
||||
已勾选32 |
||||
</div> |
||||
<div class="code-name">.icon-yigouxuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weigouxuan"></span> |
||||
<div class="name"> |
||||
未勾选32 |
||||
</div> |
||||
<div class="code-name">.icon-weigouxuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weigouxuan1"></span> |
||||
<div class="name"> |
||||
未勾选40 |
||||
</div> |
||||
<div class="code-name">.icon-weigouxuan1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yigouxuan1"></span> |
||||
<div class="name"> |
||||
已勾选40 |
||||
</div> |
||||
<div class="code-name">.icon-yigouxuan1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shixiangyoujiantou-"></span> |
||||
<div class="name"> |
||||
实 向右箭头-01 |
||||
</div> |
||||
<div class="code-name">.icon-shixiangyoujiantou- |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shixiangxiajiantou-"></span> |
||||
<div class="name"> |
||||
实 向下箭头-01 |
||||
</div> |
||||
<div class="code-name">.icon-shixiangxiajiantou- |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-jiahao"></span> |
||||
<div class="name"> |
||||
加号-填充 |
||||
</div> |
||||
<div class="code-name">.icon-jiahao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-up"></span> |
||||
<div class="name"> |
||||
42指向上、上箭头 |
||||
</div> |
||||
<div class="code-name">.icon-up |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-down"></span> |
||||
<div class="name"> |
||||
44指向下、下箭头 |
||||
</div> |
||||
<div class="code-name">.icon-down |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-delete"></span> |
||||
<div class="name"> |
||||
群蜂删除-充 |
||||
</div> |
||||
<div class="code-name">.icon-delete |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-qq"></span> |
||||
<div class="name"> |
||||
qq |
||||
</div> |
||||
<div class="code-name">.icon-qq |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weixin"></span> |
||||
<div class="name"> |
||||
微信-36 |
||||
</div> |
||||
<div class="code-name">.icon-weixin |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比,具有如下特点:</p> |
||||
<ul> |
||||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下:</p> |
||||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yigouxuan"></use> |
||||
</svg> |
||||
<div class="name">已勾选32</div> |
||||
<div class="code-name">#icon-yigouxuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weigouxuan"></use> |
||||
</svg> |
||||
<div class="name">未勾选32</div> |
||||
<div class="code-name">#icon-weigouxuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weigouxuan1"></use> |
||||
</svg> |
||||
<div class="name">未勾选40</div> |
||||
<div class="code-name">#icon-weigouxuan1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yigouxuan1"></use> |
||||
</svg> |
||||
<div class="name">已勾选40</div> |
||||
<div class="code-name">#icon-yigouxuan1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shixiangyoujiantou-"></use> |
||||
</svg> |
||||
<div class="name">实 向右箭头-01</div> |
||||
<div class="code-name">#icon-shixiangyoujiantou-</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shixiangxiajiantou-"></use> |
||||
</svg> |
||||
<div class="name">实 向下箭头-01</div> |
||||
<div class="code-name">#icon-shixiangxiajiantou-</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-jiahao"></use> |
||||
</svg> |
||||
<div class="name">加号-填充</div> |
||||
<div class="code-name">#icon-jiahao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-up"></use> |
||||
</svg> |
||||
<div class="name">42指向上、上箭头</div> |
||||
<div class="code-name">#icon-up</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-down"></use> |
||||
</svg> |
||||
<div class="name">44指向下、下箭头</div> |
||||
<div class="code-name">#icon-down</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-delete"></use> |
||||
</svg> |
||||
<div class="name">群蜂删除-充</div> |
||||
<div class="code-name">#icon-delete</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-qq"></use> |
||||
</svg> |
||||
<div class="name">qq</div> |
||||
<div class="code-name">#icon-qq</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weixin"></use> |
||||
</svg> |
||||
<div class="name">微信-36</div> |
||||
<div class="code-name">#icon-weixin</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> |
||||
<ul> |
||||
<li>支持多色图标了,不再受单色限制。</li> |
||||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下:</p> |
||||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,71 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1589437921018'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1589437921018#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1589437921018') format('woff'), |
||||
url('iconfont.ttf?t=1589437921018') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1589437921018#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-yigouxuan:before { |
||||
content: "\e63d"; |
||||
} |
||||
|
||||
.icon-weigouxuan:before { |
||||
content: "\e63e"; |
||||
} |
||||
|
||||
.icon-weigouxuan1:before { |
||||
content: "\e64a"; |
||||
} |
||||
|
||||
.icon-yigouxuan1:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-shixiangyoujiantou-:before { |
||||
content: "\e626"; |
||||
} |
||||
|
||||
.icon-shixiangxiajiantou-:before { |
||||
content: "\e625"; |
||||
} |
||||
|
||||
.icon-jiahao:before { |
||||
content: "\e72d"; |
||||
} |
||||
|
||||
.icon-up:before { |
||||
content: "\e769"; |
||||
} |
||||
|
||||
.icon-down:before { |
||||
content: "\e76b"; |
||||
} |
||||
|
||||
.icon-delete:before { |
||||
content: "\e6e9"; |
||||
} |
||||
|
||||
.icon-qq:before { |
||||
content: "\e614"; |
||||
font-size: 60px; |
||||
color: #22aaf8; |
||||
margin-left: 32px; |
||||
} |
||||
|
||||
.icon-weixin:before { |
||||
content: "\e68a"; |
||||
font-size: 60px; |
||||
color: #10b747; |
||||
margin-right: 32px; |
||||
} |
||||
|
@ -0,0 +1,93 @@ |
||||
{ |
||||
"id": "1540265", |
||||
"name": "education", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "2716513", |
||||
"name": "已勾选32", |
||||
"font_class": "yigouxuan", |
||||
"unicode": "e63d", |
||||
"unicode_decimal": 58941 |
||||
}, |
||||
{ |
||||
"icon_id": "2716516", |
||||
"name": "未勾选32", |
||||
"font_class": "weigouxuan", |
||||
"unicode": "e63e", |
||||
"unicode_decimal": 58942 |
||||
}, |
||||
{ |
||||
"icon_id": "2892929", |
||||
"name": "未勾选40", |
||||
"font_class": "weigouxuan1", |
||||
"unicode": "e64a", |
||||
"unicode_decimal": 58954 |
||||
}, |
||||
{ |
||||
"icon_id": "2892954", |
||||
"name": "已勾选40", |
||||
"font_class": "yigouxuan1", |
||||
"unicode": "e64b", |
||||
"unicode_decimal": 58955 |
||||
}, |
||||
{ |
||||
"icon_id": "5979965", |
||||
"name": "实 向右箭头-01", |
||||
"font_class": "shixiangyoujiantou-", |
||||
"unicode": "e626", |
||||
"unicode_decimal": 58918 |
||||
}, |
||||
{ |
||||
"icon_id": "5979966", |
||||
"name": "实 向下箭头-01", |
||||
"font_class": "shixiangxiajiantou-", |
||||
"unicode": "e625", |
||||
"unicode_decimal": 58917 |
||||
}, |
||||
{ |
||||
"icon_id": "8349103", |
||||
"name": "加号-填充", |
||||
"font_class": "jiahao", |
||||
"unicode": "e72d", |
||||
"unicode_decimal": 59181 |
||||
}, |
||||
{ |
||||
"icon_id": "6129078", |
||||
"name": "42指向上、上箭头", |
||||
"font_class": "up", |
||||
"unicode": "e769", |
||||
"unicode_decimal": 59241 |
||||
}, |
||||
{ |
||||
"icon_id": "6129081", |
||||
"name": "44指向下、下箭头", |
||||
"font_class": "down", |
||||
"unicode": "e76b", |
||||
"unicode_decimal": 59243 |
||||
}, |
||||
{ |
||||
"icon_id": "410692", |
||||
"name": "群蜂删除-充", |
||||
"font_class": "delete", |
||||
"unicode": "e6e9", |
||||
"unicode_decimal": 59113 |
||||
}, |
||||
{ |
||||
"icon_id": "468193", |
||||
"name": "qq", |
||||
"font_class": "qq", |
||||
"unicode": "e614", |
||||
"unicode_decimal": 58900 |
||||
}, |
||||
{ |
||||
"icon_id": "7009153", |
||||
"name": "微信-36", |
||||
"font_class": "weixin", |
||||
"unicode": "e68a", |
||||
"unicode_decimal": 59018 |
||||
} |
||||
] |
||||
} |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 7.6 KiB |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 384 B |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 709 B |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 632 B |
After Width: | Height: | Size: 918 B |
After Width: | Height: | Size: 499 B |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 683 B |
After Width: | Height: | Size: 556 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 227 KiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 539 B |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 323 KiB |
After Width: | Height: | Size: 6.7 KiB |
After Width: | Height: | Size: 422 B |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 648 B |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 673 B |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 3.7 KiB |