Unicode 引用
-- -
Unicode 是字体在网页端最原始的应用方式，特点是：
--
-
- 支持按字体的方式去动态调整图标大小，颜色等等。 -
- 默认情况下不支持多色，直接添加多色图标会自动去色。 -
--注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol - 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
-
Unicode 使用步骤如下：
-第一步：拷贝项目下面生成的 @font-face
-
+
+ iconfont Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ -
+
+ biaoqian
+ 
+
+
+ -
+
+ polyline-v1
+ 
+
+
+ -
+
+ polygon-v1
+ 
+
+
+ -
+
+ ruler
+ 
+
+
+ -
+
+ lunkuo
+ 
+
+
+ -
+
+ jiance
+ 
+
+
+ -
+
+ Hotkeys
+ 
+
+
+ -
+
+ rect
+ 
+
+
+ -
+
+ bone
+ 
+
+
+ -
+
+ splinecurve
+ 
+
+
+ -
+
+ polygon
+ 
+
+
+ -
+
+ unclosedpolygon
+ 
+
+
+ -
+
+ beisaierquxian
+ 
+
+
+ -
+
+ point
+ 
+
+
+ -
+
+ liebiao
+ 
+
+
+ -
+
+ Crop non-first object
+ 
+
+
+ -
+
+ Crop the first object
+ 
+
+
+ -
+
+ 图层显示
+ 
+
+
+ -
+
+ group
+ 
+
+
+ -
+
+ tuichuzu
+ 
+
+
+ -
+
+ ai
+ 
+
+
+ -
+
+ cancel
+ 
+
+
+ -
+
+ jiaohushi
+ 
+
+
+ -
+
+ add
+ 
+
+
+ -
+
+ more
+ 
+
+
+ -
+
+ error
+ 
+
+
+ -
+
+ fangda
+ 
+
+
+ -
+
+ cube
+ 
+
+
+ -
+
+ No result in this frame
+ 
+
+
+ -
+
+ ai kuang
+ 
+
+
+ -
+
+ noun-isometric
+ 
+
+
+ -
+
+ Ground Truth in all frames
+ 
+
+
+ -
+
+ Ground truth
+ 
+
+
+ -
+
+ restore
+ 
+
+
+ -
+
+ Acceptance
+ 
+
+
+ -
+
+ review
+ 
+
+
+ -
+
+ Annotate
+ 
+
+
+ -
+
+ Modify
+ 
+
+
+ -
+
+ QA
+ 
+
+
+ -
+
+ arrow
+ 
+
+
+ -
+
+ suspend
+ 
+
+
+ -
+
+ ongoing
+ 
+
+
+ -
+
+ Classfication
+ 
+
+
+ -
+
+ Comments
+ 
+
+
+ -
+
+ Results
+ 
+
+
+ -
+
+ Validity
+ 
+
+
+ -
+
+ Group
+ 
+
+
+ -
+
+ abnormal
+ 
+
+
+ -
+
+ rectangular
+ 
+
+
+ -
+
+ 3d
+ 
+
+
+ -
+
+ bofang
+ 
+
+
+ -
+
+ hebing
+ 
+
+
+ -
+
+ chongxinbofang
+ 
+
+
+ -
+
+ jiancha
+ 
+
+
+ -
+
+ zuo-fuzhi
+ 
+
+
+ -
+
+ right-fuzhi
+ 
+
+
+ -
+
+ file
+ 
+
+
+ -
+
+ review
+ 
+
+
+ -
+
+ download
+ 
+
+
+ -
+
+ open
+ 
+
+
+ -
+
+ polyline
+ 
+
+
+ -
+
+ ai
+ 
+
+
+ -
+
+ rect
+ 
+
+
+ -
+
+ edit
+ 
+
+
+ -
+
+ polygon
+ 
+
+
+ -
+
+ link
+ 
+
+
+ -
+
+ cube
+ 
+
+
+ -
+
+ loading
+ 
+
+
+ -
+
+ model
+ 
+
+
+ -
+
+ folding
+ 
+
+
+ -
+
+ right
+ 
+
+
+ -
+
+ left
+ 
+
+
+ -
+
+ hidden
+ 
+
+
+ -
+
+ an-an
+ 
+
+
+ -
+
+ more
+ 
+
+
+ -
+
+ Auxiliary line
+ 
+
+
+ -
+
+ target
+ 
+
+
+ -
+
+ cube
+ 
+
+
+ -
+
+ The standard frame
+ 
+
+
+ -
+
+ view
+ 
+
+
+ -
+
+ delete
+ 
+
+
+ -
+
+ Edit the label
+ 
+
+
+ -
+
+ screening
+ 
+
+
+ -
+
+ notation-tool
+ 
+
+
+ -
+
+ Add a notation
+ 
+
+
+ -
+
+ Have been added
+ 
+
+
+ -
+
+ Notes - list
+ 
+
+
+ -
+
+ remind
+ 
+
+
+ -
+
+ Left rotation
+ 
+
+
+ -
+
+ Right rotation
+ 
+
+
+ -
+
+ up
+ 
+
+
+ -
+
+ down
+ 
+
+
+ -
+
+ an-right
+ 
+
+
+ -
+
+ Pack up
+ 
+
+
+ -
+
+ tool
+ 
+
+
+ -
+
+ move
+ 
+
+
+ -
+
+ rotating
+ 
+
+
+ -
+
+ mapping
+ 
+
+
+ -
+
+ information
+ 
+
+
+ -
+
+ According to
+ 
+
+
+ -
+
+ submit
+ 
+
+
+ -
+
+ hang up
+ 
+
+
+ -
+
+ Exit full screen
+ 
+
+
+ -
+
+ Full screen
+ 
+
+
+ -
+
+ help
+ 
+
+
+ -
+
+ save
+ 
+
+
+ -
+
+ Work flow
+ 
+
+
+ -
+
+ Expiration time
+ 
+
+
+ -
+
+ Job information
+ 
+
+
+
+
+ Unicode 引用
+
+
+ Unicode 是字体在网页端最原始的应用方式，特点是：
+
+ - 支持按字体的方式去动态调整图标大小，颜色等等。
+ - 默认情况下不支持多色，直接添加多色图标会自动去色。
+
+
+ 注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
+
+ Unicode 使用步骤如下：
+ 第一步：拷贝项目下面生成的 @font-face
+@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1659510737631') format('woff2'),
- url('iconfont.woff?t=1659510737631') format('woff'),
- url('iconfont.ttf?t=1659510737631') format('truetype');
+ src: url('iconfont.woff2?t=1693477727245') format('woff2'),
+ url('iconfont.woff?t=1693477727245') format('woff'),
+ url('iconfont.ttf?t=1693477727245') format('truetype');
}
- 第二步：定义使用 iconfont 的样式
- 第二步：定义使用 iconfont 的样式
+.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
@@ -421,825 +741,1918 @@ 第二步：定义使用 iconfont 的样式
-moz-osx-font-smoothing: grayscale;
}
- 第三步：挑选相应图标并获取字体编码，应用于页面
-
+ 第三步：挑选相应图标并获取字体编码，应用于页面
+
<span class="iconfont">3</span>
-
- "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是
- "iconfont"。
-
-
-
-
-
- -
-
- file
- .icon-file
-
-
- -
-
- review
- .icon-review
-
-
- -
-
- download
- .icon-download
-
-
- -
-
- open
- .icon-open
-
-
- -
-
- polyline
- .icon-polyline
-
-
- -
-
- ai
- .icon-ai
-
-
- -
-
- rect
- .icon-rect
-
-
- -
-
- edit
- .icon-edit
-
-
- -
-
- polygon
- .icon-polygon
-
-
- -
-
- link
- .icon-Frame
-
-
- -
-
- cube
- .icon-a-122
-
-
- -
-
- loading
- .icon-loading
-
-
- -
-
- model
- .icon-Vector
-
-
- -
-
- folding
- .icon-dakai
-
-
- -
-
- right
- .icon-right
-
-
- -
-
- left
- .icon-a-zu25265
-
-
- -
-
- hidden
- .icon-a-zu25263
-
-
- -
-
- an-an
- .icon-a-zu25262
-
-
- -
-
- more
- .icon-gengduoicon
-
-
- -
-
- Auxiliary line
- .icon-fuzhuxian
-
-
- -
-
- target
- .icon-mubiao
-
-
- -
-
- cube
- .icon-lifangti
-
-
- -
-
- The standard frame
- .icon-biaozhunkuang
-
-
- -
-
- view
- .icon-yanjing
-
-
- -
-
- delete
- .icon-shanchuicon
-
-
- -
-
- Edit the label
- .icon-bianjibiaoqian
-
-
- -
-
- screening
- .icon-shaixuan
-
-
- -
-
- notation-tool
- .icon-pizhuicon
-
-
- -
-
- Add a notation
- .icon-tianjiapizhu
-
-
- -
-
- Have been added
- .icon-yitianjia
-
-
- -
-
- Notes - list
- .icon-pizhu
-
-
- -
-
- remind
- .icon-tixing
-
-
- -
-
- Left rotation
- .icon-zuoxuanze
-
-
- -
-
- Right rotation
- .icon-youxuanzhuan
-
-
- -
-
- up
- .icon-shang
-
-
- -
-
- down
- .icon-xia
-
-
- -
-
- an-right
- .icon-zhankai1
-
-
- -
-
- Pack up
- .icon-shouqi
-
-
- -
-
- tool
- .icon-gongju
-
-
- -
-
- move
- .icon-yidong
-
-
- -
-
- rotating
- .icon-xuanzhuan
-
-
- -
-
- mapping
- .icon-yingshe
-
-
- -
-
- information
- .icon-xinxi
-
-
- -
-
- According to
- .icon-xianshi
-
-
- -
-
- submit
- .icon-tijiao
-
-
- -
-
- hang up
- .icon-guaqi
-
-
- -
-
- Exit full screen
- .icon-tuichuquanping
-
-
- -
-
- Full screen
- .icon-a-Fullscreen
-
-
- -
-
- help
- .icon-help
-
-
- -
-
- save
- .icon-save
-
-
- -
-
- Work flow
- .icon-a-Workflow
-
-
- -
-
- Expiration time
- .icon-a-lujing15750
-
-
- -
-
- Job information
- .icon-a-Jobinformation
-
-
-
- font-class 引用
-
-
- font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
- 书写不直观，语意不明确的问题。
- 与 Unicode 使用方式相比，具有如下特点：
-
- - 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
- 是什么。
- - 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
- 里面的 Unicode 引用。
-
- 使用步骤如下：
- 第一步：引入项目下面生成的 fontclass 代码：
- <link rel="stylesheet" href="./iconfont.css">
+
+ "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
+
+
+
+
+
+ -
+
+
+ biaoqian
+
+ .icon-label
+
+
+
+ -
+
+
+ polyline-v1
+
+ .icon-polyline-v1
+
+
+
+ -
+
+
+ polygon-v1
+
+ .icon-polygon-v1
+
+
+
+ -
+
+
+ ruler
+
+ .icon-ruler
+
+
+
+ -
+
+
+ lunkuo
+
+ .icon-lunkuo
+
+
+
+ -
+
+
+ jiance
+
+ .icon-jiance
+
+
+
+ -
+
+
+ Hotkeys
+
+ .icon-Hotkeys
+
+
+
+ -
+
+
+ rect
+
+ .icon-rect1
+
+
+
+ -
+
+
+ bone
+
+ .icon-bone
+
+
+
+ -
+
+
+ splinecurve
+
+ .icon-splinecurve
+
+
+
+ -
+
+
+ polygon
+
+ .icon-polygon1
+
+
+
+ -
+
+
+ unclosedpolygon
+
+ .icon-unclosedpolygon
+
+
+
+ -
+
+
+ beisaierquxian
+
+ .icon-bezier-curve
+
+
+
+ -
+
+
+ point
+
+ .icon-point
+
+
+
+ -
+
+
+ liebiao
+
+ .icon-liebiao
+
+
+
+ -
+
+
+ Crop non-first object
+
+ .icon-a-Cropnon-firstobject
+
+
+
+ -
+
+
+ Crop the first object
+
+ .icon-a-Cropthefirstobject
+
+
+
+ -
+
+
+ 图层显示
+
+ .icon-tucengxianshi
+
+
+
+ -
+
+
+ group
+
+ .icon-group
+
+
+
+ -
+
+
+ tuichuzu
+
+ .icon-tuichuzu
+
+
+
+ -
+
+
+ ai
+
+ .icon-ai1
+
+
+
+ -
+
+
+ cancel
+
+ .icon-cancel
+
+
+
+ -
+
+
+ jiaohushi
+
+ .icon-jiaohushi
+
+
+
+ -
+
+
+ add
+
+ .icon-add
+
+
+
+ -
+
+
+ more
+
+ .icon-more
+
+
+
+ -
+
+
+ error
+
+ .icon-error
+
+
+
+ -
+
+
+ fangda
+
+ .icon-fangda
+
+
+
+ -
+
+
+ cube
+
+ .icon-cube
+
+
+
+ -
+
+
+ No result in this frame
+
+ .icon-a-Noresultinthisframe
+
+
+
+ -
+
+
+ ai kuang
+
+ .icon-a-aikuang
+
+
+
+ -
+
+
+ noun-isometric
+
+ .icon-noun-isometric
+
+
+
+ -
+
+
+ Ground Truth in all frames
+
+ .icon-a-GroundTruthinallframes
+
+
+
+ -
+
+
+ Ground truth
+
+ .icon-a-Groundtruth
+
+
+
+ -
+
+
+ restore
+
+ .icon-huifu
+
+
+
+ -
+
+
+ Acceptance
+
+ .icon-Acceptance
+
+
+
+ -
+
+
+ review
+
+ .icon-review1
+
+
+
+ -
+
+
+ Annotate
+
+ .icon-Annotate
+
+
+
+ -
+
+
+ Modify
+
+ .icon-Modify
+
+
+
+ -
+
+
+ QA
+
+ .icon-QA
+
+
+
+ -
+
+
+ arrow
+
+ .icon-Frame3
+
+
+
+ -
+
+
+ suspend
+
+ .icon-Frame2
+
+
+
+ -
+
+
+ ongoing
+
+ .icon-Frame23
+
+
+
+ -
+
+
+ Classfication
+
+ .icon-Classfication
+
+
+
+ -
+
+
+ Comments
+
+ .icon-Comments
+
+
+
+ -
+
+
+ Results
+
+ .icon-Results
+
+
+
+ -
+
+
+ Validity
+
+ .icon-Validity
+
+
+
+ -
+
+
+ Group
+
+ .icon-Group
+
+
+
+ -
+
+
+ abnormal
+
+ .icon-Frame1
+
+
+
+ -
+
+
+ rectangular
+
+ .icon-rectangular
+
+
+
+ -
+
+
+ 3d
+
+ .icon-a-3d
+
+
+
+ -
+
+
+ bofang
+
+ .icon-bofang
+
+
+
+ -
+
+
+ hebing
+
+ .icon-hebing
+
+
+
+ -
+
+
+ chongxinbofang
+
+ .icon-chongxinbofang
+
+
+
+ -
+
+
+ jiancha
+
+ .icon-jiancha
+
+
+
+ -
+
+
+ zuo-fuzhi
+
+ .icon-zuo-fuzhi
+
+
+
+ -
+
+
+ right-fuzhi
+
+ .icon-right-fuzhi
+
+
+
+ -
+
+
+ file
+
+ .icon-file
+
+
+
+ -
+
+
+ review
+
+ .icon-review
+
+
+
+ -
+
+
+ download
+
+ .icon-download
+
+
+
+ -
+
+
+ open
+
+ .icon-open
+
+
+
+ -
+
+
+ polyline
+
+ .icon-polyline
+
+
+
+ -
+
+
+ ai
+
+ .icon-ai
+
+
+
+ -
+
+
+ rect
+
+ .icon-rect
+
+
+
+ -
+
+
+ edit
+
+ .icon-edit
+
+
+
+ -
+
+
+ polygon
+
+ .icon-polygon
+
+
+
+ -
+
+
+ link
+
+ .icon-Frame
+
+
+
+ -
+
+
+ cube
+
+ .icon-a-122
+
+
+
+ -
+
+
+ loading
+
+ .icon-loading
+
+
+
+ -
+
+
+ model
+
+ .icon-Vector
+
+
+
+ -
+
+
+ folding
+
+ .icon-dakai
+
+
+
+ -
+
+
+ right
+
+ .icon-right
+
+
+
+ -
+
+
+ left
+
+ .icon-a-zu25265
+
+
+
+ -
+
+
+ hidden
+
+ .icon-a-zu25263
+
+
+
+ -
+
+
+ an-an
+
+ .icon-a-zu25262
+
+
+
+ -
+
+
+ more
+
+ .icon-gengduoicon
+
+
+
+ -
+
+
+ Auxiliary line
+
+ .icon-fuzhuxian
+
+
+
+ -
+
+
+ target
+
+ .icon-mubiao
+
+
+
+ -
+
+
+ cube
+
+ .icon-lifangti
+
+
+
+ -
+
+
+ The standard frame
+
+ .icon-biaozhunkuang
+
+
+
+ -
+
+
+ view
+
+ .icon-yanjing
+
+
+
+ -
+
+
+ delete
+
+ .icon-shanchuicon
+
+
+
+ -
+
+
+ Edit the label
+
+ .icon-bianjibiaoqian
+
+
+
+ -
+
+
+ screening
+
+ .icon-shaixuan
+
+
+
+ -
+
+
+ notation-tool
+
+ .icon-pizhuicon
+
+
+
+ -
+
+
+ Add a notation
+
+ .icon-tianjiapizhu
+
+
+
+ -
+
+
+ Have been added
+
+ .icon-yitianjia
+
+
+
+ -
+
+
+ Notes - list
+
+ .icon-pizhu
+
+
+
+ -
+
+
+ remind
+
+ .icon-tixing
+
+
+
+ -
+
+
+ Left rotation
+
+ .icon-zuoxuanze
+
+
+
+ -
+
+
+ Right rotation
+
+ .icon-youxuanzhuan
+
+
+
+ -
+
+
+ up
+
+ .icon-shang
+
+
+
+ -
+
+
+ down
+
+ .icon-xia
+
+
+
+ -
+
+
+ an-right
+
+ .icon-zhankai1
+
+
+
+ -
+
+
+ Pack up
+
+ .icon-shouqi
+
+
+
+ -
+
+
+ tool
+
+ .icon-gongju
+
+
+
+ -
+
+
+ move
+
+ .icon-yidong
+
+
+
+ -
+
+
+ rotating
+
+ .icon-xuanzhuan
+
+
+
+ -
+
+
+ mapping
+
+ .icon-yingshe
+
+
+
+ -
+
+
+ information
+
+ .icon-xinxi
+
+
+
+ -
+
+
+ According to
+
+ .icon-xianshi
+
+
+
+ -
+
+
+ submit
+
+ .icon-tijiao
+
+
+
+ -
+
+
+ hang up
+
+ .icon-guaqi
+
+
+
+ -
+
+
+ Exit full screen
+
+ .icon-tuichuquanping
+
+
+
+ -
+
+
+ Full screen
+
+ .icon-a-Fullscreen
+
+
+
+ -
+
+
+ help
+
+ .icon-help
+
+
+
+ -
+
+
+ save
+
+ .icon-save
+
+
+
+ -
+
+
+ Work flow
+
+ .icon-a-Workflow
+
+
+
+ -
+
+
+ Expiration time
+
+ .icon-a-lujing15750
+
+
+
+ -
+
+
+ Job information
+
+ .icon-a-Jobinformation
+
+
+
+
+
+ font-class 引用
+
+
+ font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
+ 与 Unicode 使用方式相比，具有如下特点：
+
+ - 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
+ - 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
+
+ 使用步骤如下：
+ 第一步：引入项目下面生成的 fontclass 代码：
+<link rel="stylesheet" href="./iconfont.css">
- 第二步：挑选相应图标并获取类名，应用于页面：
- <span class="iconfont icon-xxx"></span>
+ 第二步：挑选相应图标并获取类名，应用于页面：
+<span class="iconfont icon-xxx"></span>
-
- " iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是
- "iconfont"。
-
-
-
-
-
- -
-
- file
- #icon-file
-
-
- -
-
- review
- #icon-review
-
-
- -
-
- download
- #icon-download
-
-
- -
-
- open
- #icon-open
-
-
- -
-
- polyline
- #icon-polyline
-
-
- -
-
- ai
- #icon-ai
-
-
- -
-
- rect
- #icon-rect
-
-
- -
-
- edit
- #icon-edit
-
-
- -
-
- polygon
- #icon-polygon
-
-
- -
-
- link
- #icon-Frame
-
-
- -
-
- cube
- #icon-a-122
-
-
- -
-
- loading
- #icon-loading
-
-
- -
-
- model
- #icon-Vector
-
-
- -
-
- folding
- #icon-dakai
-
-
- -
-
- right
- #icon-right
-
-
- -
-
- left
- #icon-a-zu25265
-
-
- -
-
- hidden
- #icon-a-zu25263
-
-
- -
-
- an-an
- #icon-a-zu25262
-
-
- -
-
- more
- #icon-gengduoicon
-
-
- -
-
- Auxiliary line
- #icon-fuzhuxian
-
-
- -
-
- target
- #icon-mubiao
-
-
- -
-
- cube
- #icon-lifangti
-
-
- -
-
- The standard frame
- #icon-biaozhunkuang
-
-
- -
-
- view
- #icon-yanjing
-
-
- -
-
- delete
- #icon-shanchuicon
-
-
- -
-
- Edit the label
- #icon-bianjibiaoqian
-
-
- -
-
- screening
- #icon-shaixuan
-
-
- -
-
- notation-tool
- #icon-pizhuicon
-
-
- -
-
- Add a notation
- #icon-tianjiapizhu
-
-
- -
-
- Have been added
- #icon-yitianjia
-
-
- -
-
- Notes - list
- #icon-pizhu
-
-
- -
-
- remind
- #icon-tixing
-
-
- -
-
- Left rotation
- #icon-zuoxuanze
-
-
- -
-
- Right rotation
- #icon-youxuanzhuan
-
-
- -
-
- up
- #icon-shang
-
-
- -
-
- down
- #icon-xia
-
-
- -
-
- an-right
- #icon-zhankai1
-
-
- -
-
- Pack up
- #icon-shouqi
-
-
- -
-
- tool
- #icon-gongju
-
-
- -
-
- move
- #icon-yidong
-
-
- -
-
- rotating
- #icon-xuanzhuan
-
-
- -
-
- mapping
- #icon-yingshe
-
-
- -
-
- information
- #icon-xinxi
-
-
- -
-
- According to
- #icon-xianshi
-
-
- -
-
- submit
- #icon-tijiao
-
-
- -
-
- hang up
- #icon-guaqi
-
-
- -
-
- Exit full screen
- #icon-tuichuquanping
-
-
- -
-
- Full screen
- #icon-a-Fullscreen
-
-
- -
-
- help
- #icon-help
-
-
- -
-
- save
- #icon-save
-
-
- -
-
- Work flow
- #icon-a-Workflow
-
-
- -
-
- Expiration time
- #icon-a-lujing15750
-
-
- -
-
- Job information
- #icon-a-Jobinformation
-
-
-
- Symbol 引用
-
-
- 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
- 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
-
- - 支持多色图标了，不再受单色限制。
- - 通过一些技巧，支持像字体那样，通过
font-size,
- color 来调整样式。
- - 兼容性较差，支持 IE9+，及现代浏览器。
- - 浏览器渲染 SVG 的性能一般，还不如 png。
-
- 使用步骤如下：
- 第一步：引入项目下面生成的 symbol 代码：
- <script src="./iconfont.js"></script>
+
+ "
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
+
+
+
+
+
+ -
+
+ biaoqian
+ #icon-label
+
+
+ -
+
+ polyline-v1
+ #icon-polyline-v1
+
+
+ -
+
+ polygon-v1
+ #icon-polygon-v1
+
+
+ -
+
+ ruler
+ #icon-ruler
+
+
+ -
+
+ lunkuo
+ #icon-lunkuo
+
+
+ -
+
+ jiance
+ #icon-jiance
+
+
+ -
+
+ Hotkeys
+ #icon-Hotkeys
+
+
+ -
+
+ rect
+ #icon-rect1
+
+
+ -
+
+ bone
+ #icon-bone
+
+
+ -
+
+ splinecurve
+ #icon-splinecurve
+
+
+ -
+
+ polygon
+ #icon-polygon1
+
+
+ -
+
+ unclosedpolygon
+ #icon-unclosedpolygon
+
+
+ -
+
+ beisaierquxian
+ #icon-bezier-curve
+
+
+ -
+
+ point
+ #icon-point
+
+
+ -
+
+ liebiao
+ #icon-liebiao
+
+
+ -
+
+ Crop non-first object
+ #icon-a-Cropnon-firstobject
+
+
+ -
+
+ Crop the first object
+ #icon-a-Cropthefirstobject
+
+
+ -
+
+ 图层显示
+ #icon-tucengxianshi
+
+
+ -
+
+ group
+ #icon-group
+
+
+ -
+
+ tuichuzu
+ #icon-tuichuzu
+
+
+ -
+
+ ai
+ #icon-ai1
+
+
+ -
+
+ cancel
+ #icon-cancel
+
+
+ -
+
+ jiaohushi
+ #icon-jiaohushi
+
+
+ -
+
+ add
+ #icon-add
+
+
+ -
+
+ more
+ #icon-more
+
+
+ -
+
+ error
+ #icon-error
+
+
+ -
+
+ fangda
+ #icon-fangda
+
+
+ -
+
+ cube
+ #icon-cube
+
+
+ -
+
+ No result in this frame
+ #icon-a-Noresultinthisframe
+
+
+ -
+
+ ai kuang
+ #icon-a-aikuang
+
+
+ -
+
+ noun-isometric
+ #icon-noun-isometric
+
+
+ -
+
+ Ground Truth in all frames
+ #icon-a-GroundTruthinallframes
+
+
+ -
+
+ Ground truth
+ #icon-a-Groundtruth
+
+
+ -
+
+ restore
+ #icon-huifu
+
+
+ -
+
+ Acceptance
+ #icon-Acceptance
+
+
+ -
+
+ review
+ #icon-review1
+
+
+ -
+
+ Annotate
+ #icon-Annotate
+
+
+ -
+
+ Modify
+ #icon-Modify
+
+
+ -
+
+ QA
+ #icon-QA
+
+
+ -
+
+ arrow
+ #icon-Frame3
+
+
+ -
+
+ suspend
+ #icon-Frame2
+
+
+ -
+
+ ongoing
+ #icon-Frame23
+
+
+ -
+
+ Classfication
+ #icon-Classfication
+
+
+ -
+
+ Comments
+ #icon-Comments
+
+
+ -
+
+ Results
+ #icon-Results
+
+
+ -
+
+ Validity
+ #icon-Validity
+
+
+ -
+
+ Group
+ #icon-Group
+
+
+ -
+
+ abnormal
+ #icon-Frame1
+
+
+ -
+
+ rectangular
+ #icon-rectangular
+
+
+ -
+
+ 3d
+ #icon-a-3d
+
+
+ -
+
+ bofang
+ #icon-bofang
+
+
+ -
+
+ hebing
+ #icon-hebing
+
+
+ -
+
+ chongxinbofang
+ #icon-chongxinbofang
+
+
+ -
+
+ jiancha
+ #icon-jiancha
+
+
+ -
+
+ zuo-fuzhi
+ #icon-zuo-fuzhi
+
+
+ -
+
+ right-fuzhi
+ #icon-right-fuzhi
+
+
+ -
+
+ file
+ #icon-file
+
+
+ -
+
+ review
+ #icon-review
+
+
+ -
+
+ download
+ #icon-download
+
+
+ -
+
+ open
+ #icon-open
+
+
+ -
+
+ polyline
+ #icon-polyline
+
+
+ -
+
+ ai
+ #icon-ai
+
+
+ -
+
+ rect
+ #icon-rect
+
+
+ -
+
+ edit
+ #icon-edit
+
+
+ -
+
+ polygon
+ #icon-polygon
+
+
+ -
+
+ link
+ #icon-Frame
+
+
+ -
+
+ cube
+ #icon-a-122
+
+
+ -
+
+ loading
+ #icon-loading
+
+
+ -
+
+ model
+ #icon-Vector
+
+
+ -
+
+ folding
+ #icon-dakai
+
+
+ -
+
+ right
+ #icon-right
+
+
+ -
+
+ left
+ #icon-a-zu25265
+
+
+ -
+
+ hidden
+ #icon-a-zu25263
+
+
+ -
+
+ an-an
+ #icon-a-zu25262
+
+
+ -
+
+ more
+ #icon-gengduoicon
+
+
+ -
+
+ Auxiliary line
+ #icon-fuzhuxian
+
+
+ -
+
+ target
+ #icon-mubiao
+
+
+ -
+
+ cube
+ #icon-lifangti
+
+
+ -
+
+ The standard frame
+ #icon-biaozhunkuang
+
+
+ -
+
+ view
+ #icon-yanjing
+
+
+ -
+
+ delete
+ #icon-shanchuicon
+
+
+ -
+
+ Edit the label
+ #icon-bianjibiaoqian
+
+
+ -
+
+ screening
+ #icon-shaixuan
+
+
+ -
+
+ notation-tool
+ #icon-pizhuicon
+
+
+ -
+
+ Add a notation
+ #icon-tianjiapizhu
+
+
+ -
+
+ Have been added
+ #icon-yitianjia
+
+
+ -
+
+ Notes - list
+ #icon-pizhu
+
+
+ -
+
+ remind
+ #icon-tixing
+
+
+ -
+
+ Left rotation
+ #icon-zuoxuanze
+
+
+ -
+
+ Right rotation
+ #icon-youxuanzhuan
+
+
+ -
+
+ up
+ #icon-shang
+
+
+ -
+
+ down
+ #icon-xia
+
+
+ -
+
+ an-right
+ #icon-zhankai1
+
+
+ -
+
+ Pack up
+ #icon-shouqi
+
+
+ -
+
+ tool
+ #icon-gongju
+
+
+ -
+
+ move
+ #icon-yidong
+
+
+ -
+
+ rotating
+ #icon-xuanzhuan
+
+
+ -
+
+ mapping
+ #icon-yingshe
+
+
+ -
+
+ information
+ #icon-xinxi
+
+
+ -
+
+ According to
+ #icon-xianshi
+
+
+ -
+
+ submit
+ #icon-tijiao
+
+
+ -
+
+ hang up
+ #icon-guaqi
+
+
+ -
+
+ Exit full screen
+ #icon-tuichuquanping
+
+
+ -
+
+ Full screen
+ #icon-a-Fullscreen
+
+
+ -
+
+ help
+ #icon-help
+
+
+ -
+
+ save
+ #icon-save
+
+
+ -
+
+ Work flow
+ #icon-a-Workflow
+
+
+ -
+
+ Expiration time
+ #icon-a-lujing15750
+
+
+ -
+
+ Job information
+ #icon-a-Jobinformation
+
+
+
+
+ Symbol 引用
+
+
+ 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
+ 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
+
+ - 支持多色图标了，不再受单色限制。
+ - 通过一些技巧，支持像字体那样，通过
font-size, color 来调整样式。
+ - 兼容性较差，支持 IE9+，及现代浏览器。
+ - 浏览器渲染 SVG 的性能一般，还不如 png。
+
+ 使用步骤如下：
+ 第一步：引入项目下面生成的 symbol 代码：
+<script src="./iconfont.js"></script>
- 第二步：加入通用 CSS 代码（引入一次就行）：
- <style>
+ 第二步：加入通用 CSS 代码（引入一次就行）：
+<style>
.icon {
width: 1em;
height: 1em;
@@ -1249,33 +2662,34 @@ 第二步：加入通用 CSS 代码（引入一次就行）：
- 第三步：挑选相应图标并获取类名，应用于页面：
- <svg class="icon" aria-hidden="true">
+ 第三步：挑选相应图标并获取类名，应用于页面：
+<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
-
-
-
-
-
-
+