• Arrow-Signle-Left
    
  • Center alignment
    
  • Arrow-Signle-Up
    
  • Arrow-Signle-Right
    
  • Arrow-Double-Left
    
  • Blind
    
  • Align right
    
  • CCW
    
  • Arrow-Double-Right
    
  • Chart-Bar
    
  • Attachment
    
  • Descending
    
  • Chart-Pie
    
  • Bold
    
  • Chart-Point
    
  • Chart-Radar
    
  • Direction-Down
    
  • Code
    
  • Chart-Histogram
    
  • Barcode
    
  • Ellipsis
    
  • Clockwise
    
  • Chart-Line
    
  • Chart-Area
    
  • Cut
    
  • Exclamation mark
    
  • Edit
    
  • Drag
    
  • Enter
    
  • Error
    
  • Font size
    
  • Font color
    
  • Enlarge
    
  • Female
    
  • Download
    
  • Direction-Right
    
  • Exit
    
  • Direction-Left
    
  • Eye-Close
    
  • Direction-Up
    
  • Fullscreen Exit
    
  • Italic
    
  • Hashtag
    
  • Indent
    
  • Fall
    
  • Line height
    
  • Magnifier
    
  • Menu
    
  • Male
    
  • Link
    
  • Lottery
    
  • Percentage
    
  • Outdent
    
  • Prohibit
    
  • Refresh
    
  • Fullscreen
    
  • Question
    
  • Rollback
    
  • Scan
    
  • QRcode
    
  • Rise
    
  • Ordered list
    
  • Scissor
    
  • Sum
    
  • Swap
    
  • Shrink
    
  • Share
    
  • Strikethrough
    
  • Sync
    
  • Shutdown
    
  • Unordered list
    
  • Top
    
  • Underline
    
  • Select
    
  • Tick
    
  • WiFi
    
  • Upload
    
  • Add
    
  • Alarm
    
  • App
    
  • Book-Single
    
  • Aviation
    
  • Book-More
    
  • Bank
    
  • Bulb
    
  • Bandage
    
  • Bell
    
  • Box Plot
    
  • Cap-Mortarboard
    
  • Briefcase
    
  • Clock
    
  • Basketball
    
  • Calendar
    
  • Book-Open
    
  • Bug
    
  • Clothes
    
  • Camera
    
  • Branches
    
  • Company
    
  • Broom
    
  • Cloud-Normal
    
  • Cloud-Sync
    
  • Car
    
  • Cloud-Download
    
  • Cloud-Upload
    
  • Card-ID
    
  • Copy
    
  • Cross
    
  • Database
    
  • Desktop
    
  • Coupon
    
  • Diamond
    
  • Delete
    
  • Electronics
    
  • Detail
    
  • Crown
    
  • Dashboard
    
  • File-Compression
    
  • Egg
    
  • Envelope-Open
    
  • Drag
    
  • Error
    
  • Earth
    
  • Envelope-Close
    
  • File-Audio
    
  • Design
    
  • Eye-Normal
    
  • Folder-Add
    
  • File-Normal
    
  • File-Video
    
  • File-Picture
    
  • Flashlight
    
  • Funnel
    
  • Fire
    
  • Furniture
    
  • Experiment
    
  • Folder-Open
    
  • Gold
    
  • Folder-Close
    
  • Fork
    
  • Government
    
  • Emoticon
    
  • Help
    
  • Hierarchy
    
  • Gift
    
  • Laptop
    
  • Lock
    
  • Flag
    
  • Loudspeaker
    
  • Integral
    
  • Heart
    
  • Glasses
    
  • Headset
    
  • Key
    
  • Navigation
    
  • Moon
    
  • Eye-Slash
    
  • Microphone
    
  • Mobile
    
  • Hourglass
    
  • Order
    
  • Home
    
  • Paint Roller
    
  • Medical Kit
    
  • Pause
    
  • Mute
    
  • Location
    
  • Pen
    
  • Paint Brush
    
  • Play
    
  • Pickax
    
  • Message
    
  • Phone Out
    
  • Puzzle
    
  • Plug
    
  • Palm-Slash
    
  • Robot
    
  • Phone
    
  • Red Envelopes
    
  • Product
    
  • Purse
    
  • Resume
    
  • Printer
    
  • Sad
    
  • Pet
    
  • Rocket
    
  • Seal
    
  • Shield
    
  • Save
    
  • Shopping Bag
    
  • Shopping Cart
    
  • Shake
    
  • Signboard
    
  • Slider
    
  • Shoes
    
  • Step Forward
    
  • Share
    
  • Smile
    
  • Stopwatch
    
  • Step Backward
    
  • Table
    
  • Sub
    
  • Star
    
  • Sound
    
  • Setting
    
  • Tags
    
  • Tag
    
  • Thunder-Normal
    
  • Tie
    
  • Store
    
  • Thumbtack
    
  • Target
    
  • Thumb-Down
    
  • Umbrella
    
  • USB
    
  • Thumb-Up
    
  • Toolbox
    
  • Thunder-Slash
    
  • User-List
    
  • User-Add
    
  • User-Single
    
  • Video
    
  • Wallet
    
  • Trophy
    
  • Wrench
    
  • User-Three
    
  • Unlock
    
  • User-Double
    
  • User-Administrator
    
  • Card-Credit
    
  • Arrow-Signle-Down
    
  • Align left
    
  • Align Justify
    
  • Ascending
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1667634796073') format('woff2'),
       url('iconfont.woff?t=1667634796073') format('woff'),
       url('iconfont.ttf?t=1667634796073') format('truetype');
}

第二步:定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="iconfont">&#x33;</span>

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • Arrow-Signle-Left
    .icon-Arrow-Signle-Left
  • Center alignment
    .icon-a-Centeralignment
  • Arrow-Signle-Up
    .icon-Arrow-Signle-Up
  • Arrow-Signle-Right
    .icon-Arrow-Signle-Right
  • Arrow-Double-Left
    .icon-Arrow-Double-Left
  • Blind
    .icon-Blind
  • Align right
    .icon-a-Alignright
  • CCW
    .icon-CCW
  • Arrow-Double-Right
    .icon-Arrow-Double-Right
  • Chart-Bar
    .icon-Chart-Bar
  • Attachment
    .icon-Attachment
  • Descending
    .icon-Descending
  • Chart-Pie
    .icon-Chart-Pie
  • Bold
    .icon-Bold
  • Chart-Point
    .icon-Chart-Point
  • Chart-Radar
    .icon-Chart-Radar
  • Direction-Down
    .icon-Direction-Down
  • Code
    .icon-Code
  • Chart-Histogram
    .icon-Chart-Histogram
  • Barcode
    .icon-Barcode
  • Ellipsis
    .icon-Ellipsis
  • Clockwise
    .icon-Clockwise
  • Chart-Line
    .icon-Chart-Line
  • Chart-Area
    .icon-Chart-Area
  • Cut
    .icon-Cut
  • Exclamation mark
    .icon-a-Exclamationmark
  • Edit
    .icon-Edit
  • Drag
    .icon-Drag1
  • Enter
    .icon-Enter
  • Error
    .icon-Error1
  • Font size
    .icon-a-Fontsize
  • Font color
    .icon-a-Fontcolor
  • Enlarge
    .icon-Enlarge
  • Female
    .icon-Female
  • Download
    .icon-Download
  • Direction-Right
    .icon-Direction-Right
  • Exit
    .icon-Exit
  • Direction-Left
    .icon-Direction-Left
  • Eye-Close
    .icon-Eye-Close
  • Direction-Up
    .icon-Direction-Up
  • Fullscreen Exit
    .icon-a-FullscreenExit
  • Italic
    .icon-Italic
  • Hashtag
    .icon-Hashtag
  • Indent
    .icon-Indent
  • Fall
    .icon-Fall
  • Line height
    .icon-a-Lineheight
  • Magnifier
    .icon-Magnifier
  • Menu
    .icon-Menu
  • Male
    .icon-Male
  • Link
    .icon-Link
  • Lottery
    .icon-Lottery
  • Percentage
    .icon-Percentage
  • Outdent
    .icon-Outdent
  • Prohibit
    .icon-Prohibit
  • Refresh
    .icon-Refresh
  • Fullscreen
    .icon-Fullscreen
  • Question
    .icon-Question
  • Rollback
    .icon-Rollback
  • Scan
    .icon-Scan
  • QRcode
    .icon-QRcode
  • Rise
    .icon-Rise
  • Ordered list
    .icon-a-Orderedlist
  • Scissor
    .icon-Scissor
  • Sum
    .icon-Sum
  • Swap
    .icon-Swap
  • Shrink
    .icon-Shrink
  • Share
    .icon-Share1
  • Strikethrough
    .icon-Strikethrough
  • Sync
    .icon-Sync
  • Shutdown
    .icon-Shutdown
  • Unordered list
    .icon-a-Unorderedlist
  • Top
    .icon-Top
  • Underline
    .icon-Underline
  • Select
    .icon-Select
  • Tick
    .icon-Tick
  • WiFi
    .icon-WiFi
  • Upload
    .icon-Upload
  • Add
    .icon-Add
  • Alarm
    .icon-Alarm
  • App
    .icon-App
  • Book-Single
    .icon-Book-Single
  • Aviation
    .icon-Aviation
  • Book-More
    .icon-Book-More
  • Bank
    .icon-Bank
  • Bulb
    .icon-Bulb
  • Bandage
    .icon-Bandage
  • Bell
    .icon-Bell
  • Box Plot
    .icon-a-BoxPlot
  • Cap-Mortarboard
    .icon-Cap-Mortarboard
  • Briefcase
    .icon-Briefcase
  • Clock
    .icon-Clock
  • Basketball
    .icon-Basketball
  • Calendar
    .icon-Calendar
  • Book-Open
    .icon-Book-Open
  • Bug
    .icon-Bug
  • Clothes
    .icon-Clothes
  • Camera
    .icon-Camera
  • Branches
    .icon-Branches
  • Company
    .icon-Company
  • Broom
    .icon-Broom
  • Cloud-Normal
    .icon-Cloud-Normal
  • Cloud-Sync
    .icon-Cloud-Sync
  • Car
    .icon-Car
  • Cloud-Download
    .icon-Cloud-Download
  • Cloud-Upload
    .icon-Cloud-Upload
  • Card-ID
    .icon-Card-ID
  • Copy
    .icon-Copy
  • Cross
    .icon-Cross
  • Database
    .icon-Database
  • Desktop
    .icon-Desktop
  • Coupon
    .icon-Coupon
  • Diamond
    .icon-Diamond
  • Delete
    .icon-Delete
  • Electronics
    .icon-Electronics
  • Detail
    .icon-Detail
  • Crown
    .icon-Crown
  • Dashboard
    .icon-Dashboard
  • File-Compression
    .icon-File-Compression
  • Egg
    .icon-Egg
  • Envelope-Open
    .icon-Envelope-Open
  • Drag
    .icon-Drag
  • Error
    .icon-Error
  • Earth
    .icon-Earth
  • Envelope-Close
    .icon-Envelope-Close
  • File-Audio
    .icon-File-Audio
  • Design
    .icon-Design
  • Eye-Normal
    .icon-Eye-Normal
  • Folder-Add
    .icon-Folder-Add
  • File-Normal
    .icon-File-Normal
  • File-Video
    .icon-File-Video
  • File-Picture
    .icon-File-Picture
  • Flashlight
    .icon-Flashlight
  • Funnel
    .icon-Funnel
  • Fire
    .icon-Fire
  • Furniture
    .icon-Furniture
  • Experiment
    .icon-Experiment
  • Folder-Open
    .icon-Folder-Open
  • Gold
    .icon-Gold
  • Folder-Close
    .icon-Folder-Close
  • Fork
    .icon-Fork
  • Government
    .icon-Government
  • Emoticon
    .icon-Emoticon
  • Help
    .icon-Help
  • Hierarchy
    .icon-Hierarchy
  • Gift
    .icon-Gift
  • Laptop
    .icon-Laptop
  • Lock
    .icon-Lock
  • Flag
    .icon-Flag
  • Loudspeaker
    .icon-Loudspeaker
  • Integral
    .icon-Integral
  • Heart
    .icon-Heart
  • Glasses
    .icon-Glasses
  • Headset
    .icon-Headset
  • Key
    .icon-Key
  • Navigation
    .icon-Navigation
  • Moon
    .icon-Moon
  • Eye-Slash
    .icon-Eye-Slash
  • Microphone
    .icon-Microphone
  • Mobile
    .icon-Mobile
  • Hourglass
    .icon-Hourglass
  • Order
    .icon-Order
  • Home
    .icon-Home
  • Paint Roller
    .icon-a-PaintRoller
  • Medical Kit
    .icon-a-MedicalKit
  • Pause
    .icon-Pause
  • Mute
    .icon-Mute
  • Location
    .icon-Location
  • Pen
    .icon-Pen
  • Paint Brush
    .icon-a-PaintBrush
  • Play
    .icon-Play
  • Pickax
    .icon-Pickax
  • Message
    .icon-Message
  • Phone Out
    .icon-a-PhoneOut
  • Puzzle
    .icon-Puzzle
  • Plug
    .icon-Plug
  • Palm-Slash
    .icon-Palm-Slash
  • Robot
    .icon-Robot
  • Phone
    .icon-Phone
  • Red Envelopes
    .icon-a-RedEnvelopes
  • Product
    .icon-Product
  • Purse
    .icon-Purse
  • Resume
    .icon-Resume
  • Printer
    .icon-Printer
  • Sad
    .icon-Sad
  • Pet
    .icon-Pet
  • Rocket
    .icon-Rocket
  • Seal
    .icon-Seal
  • Shield
    .icon-Shield
  • Save
    .icon-Save
  • Shopping Bag
    .icon-a-ShoppingBag
  • Shopping Cart
    .icon-a-ShoppingCart
  • Shake
    .icon-Shake
  • Signboard
    .icon-Signboard
  • Slider
    .icon-Slider
  • Shoes
    .icon-Shoes
  • Step Forward
    .icon-a-StepForward
  • Share
    .icon-Share
  • Smile
    .icon-Smile
  • Stopwatch
    .icon-Stopwatch
  • Step Backward
    .icon-a-StepBackward
  • Table
    .icon-Table
  • Sub
    .icon-Sub
  • Star
    .icon-Star
  • Sound
    .icon-Sound
  • Setting
    .icon-Setting
  • Tags
    .icon-Tags
  • Tag
    .icon-Tag
  • Thunder-Normal
    .icon-Thunder-Normal
  • Tie
    .icon-Tie
  • Store
    .icon-Store
  • Thumbtack
    .icon-Thumbtack
  • Target
    .icon-Target
  • Thumb-Down
    .icon-Thumb-Down
  • Umbrella
    .icon-Umbrella
  • USB
    .icon-USB
  • Thumb-Up
    .icon-Thumb-Up
  • Toolbox
    .icon-Toolbox
  • Thunder-Slash
    .icon-Thunder-Slash
  • User-List
    .icon-User-List
  • User-Add
    .icon-User-Add
  • User-Single
    .icon-User-Single
  • Video
    .icon-Video
  • Wallet
    .icon-Wallet
  • Trophy
    .icon-Trophy
  • Wrench
    .icon-Wrench
  • User-Three
    .icon-User-Three
  • Unlock
    .icon-Unlock
  • User-Double
    .icon-User-Double
  • User-Administrator
    .icon-User-Administrator
  • Card-Credit
    .icon-Card-Credit
  • Arrow-Signle-Down
    .icon-Arrow-Signle-Down
  • Align left
    .icon-a-Alignleft
  • Align Justify
    .icon-a-AlignJustify
  • Ascending
    .icon-Ascending

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>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • Arrow-Signle-Left
    #icon-Arrow-Signle-Left
  • Center alignment
    #icon-a-Centeralignment
  • Arrow-Signle-Up
    #icon-Arrow-Signle-Up
  • Arrow-Signle-Right
    #icon-Arrow-Signle-Right
  • Arrow-Double-Left
    #icon-Arrow-Double-Left
  • Blind
    #icon-Blind
  • Align right
    #icon-a-Alignright
  • CCW
    #icon-CCW
  • Arrow-Double-Right
    #icon-Arrow-Double-Right
  • Chart-Bar
    #icon-Chart-Bar
  • Attachment
    #icon-Attachment
  • Descending
    #icon-Descending
  • Chart-Pie
    #icon-Chart-Pie
  • Bold
    #icon-Bold
  • Chart-Point
    #icon-Chart-Point
  • Chart-Radar
    #icon-Chart-Radar
  • Direction-Down
    #icon-Direction-Down
  • Code
    #icon-Code
  • Chart-Histogram
    #icon-Chart-Histogram
  • Barcode
    #icon-Barcode
  • Ellipsis
    #icon-Ellipsis
  • Clockwise
    #icon-Clockwise
  • Chart-Line
    #icon-Chart-Line
  • Chart-Area
    #icon-Chart-Area
  • Cut
    #icon-Cut
  • Exclamation mark
    #icon-a-Exclamationmark
  • Edit
    #icon-Edit
  • Drag
    #icon-Drag1
  • Enter
    #icon-Enter
  • Error
    #icon-Error1
  • Font size
    #icon-a-Fontsize
  • Font color
    #icon-a-Fontcolor
  • Enlarge
    #icon-Enlarge
  • Female
    #icon-Female
  • Download
    #icon-Download
  • Direction-Right
    #icon-Direction-Right
  • Exit
    #icon-Exit
  • Direction-Left
    #icon-Direction-Left
  • Eye-Close
    #icon-Eye-Close
  • Direction-Up
    #icon-Direction-Up
  • Fullscreen Exit
    #icon-a-FullscreenExit
  • Italic
    #icon-Italic
  • Hashtag
    #icon-Hashtag
  • Indent
    #icon-Indent
  • Fall
    #icon-Fall
  • Line height
    #icon-a-Lineheight
  • Magnifier
    #icon-Magnifier
  • Menu
    #icon-Menu
  • Male
    #icon-Male
  • Link
    #icon-Link
  • Lottery
    #icon-Lottery
  • Percentage
    #icon-Percentage
  • Outdent
    #icon-Outdent
  • Prohibit
    #icon-Prohibit
  • Refresh
    #icon-Refresh
  • Fullscreen
    #icon-Fullscreen
  • Question
    #icon-Question
  • Rollback
    #icon-Rollback
  • Scan
    #icon-Scan
  • QRcode
    #icon-QRcode
  • Rise
    #icon-Rise
  • Ordered list
    #icon-a-Orderedlist
  • Scissor
    #icon-Scissor
  • Sum
    #icon-Sum
  • Swap
    #icon-Swap
  • Shrink
    #icon-Shrink
  • Share
    #icon-Share1
  • Strikethrough
    #icon-Strikethrough
  • Sync
    #icon-Sync
  • Shutdown
    #icon-Shutdown
  • Unordered list
    #icon-a-Unorderedlist
  • Top
    #icon-Top
  • Underline
    #icon-Underline
  • Select
    #icon-Select
  • Tick
    #icon-Tick
  • WiFi
    #icon-WiFi
  • Upload
    #icon-Upload
  • Add
    #icon-Add
  • Alarm
    #icon-Alarm
  • App
    #icon-App
  • Book-Single
    #icon-Book-Single
  • Aviation
    #icon-Aviation
  • Book-More
    #icon-Book-More
  • Bank
    #icon-Bank
  • Bulb
    #icon-Bulb
  • Bandage
    #icon-Bandage
  • Bell
    #icon-Bell
  • Box Plot
    #icon-a-BoxPlot
  • Cap-Mortarboard
    #icon-Cap-Mortarboard
  • Briefcase
    #icon-Briefcase
  • Clock
    #icon-Clock
  • Basketball
    #icon-Basketball
  • Calendar
    #icon-Calendar
  • Book-Open
    #icon-Book-Open
  • Bug
    #icon-Bug
  • Clothes
    #icon-Clothes
  • Camera
    #icon-Camera
  • Branches
    #icon-Branches
  • Company
    #icon-Company
  • Broom
    #icon-Broom
  • Cloud-Normal
    #icon-Cloud-Normal
  • Cloud-Sync
    #icon-Cloud-Sync
  • Car
    #icon-Car
  • Cloud-Download
    #icon-Cloud-Download
  • Cloud-Upload
    #icon-Cloud-Upload
  • Card-ID
    #icon-Card-ID
  • Copy
    #icon-Copy
  • Cross
    #icon-Cross
  • Database
    #icon-Database
  • Desktop
    #icon-Desktop
  • Coupon
    #icon-Coupon
  • Diamond
    #icon-Diamond
  • Delete
    #icon-Delete
  • Electronics
    #icon-Electronics
  • Detail
    #icon-Detail
  • Crown
    #icon-Crown
  • Dashboard
    #icon-Dashboard
  • File-Compression
    #icon-File-Compression
  • Egg
    #icon-Egg
  • Envelope-Open
    #icon-Envelope-Open
  • Drag
    #icon-Drag
  • Error
    #icon-Error
  • Earth
    #icon-Earth
  • Envelope-Close
    #icon-Envelope-Close
  • File-Audio
    #icon-File-Audio
  • Design
    #icon-Design
  • Eye-Normal
    #icon-Eye-Normal
  • Folder-Add
    #icon-Folder-Add
  • File-Normal
    #icon-File-Normal
  • File-Video
    #icon-File-Video
  • File-Picture
    #icon-File-Picture
  • Flashlight
    #icon-Flashlight
  • Funnel
    #icon-Funnel
  • Fire
    #icon-Fire
  • Furniture
    #icon-Furniture
  • Experiment
    #icon-Experiment
  • Folder-Open
    #icon-Folder-Open
  • Gold
    #icon-Gold
  • Folder-Close
    #icon-Folder-Close
  • Fork
    #icon-Fork
  • Government
    #icon-Government
  • Emoticon
    #icon-Emoticon
  • Help
    #icon-Help
  • Hierarchy
    #icon-Hierarchy
  • Gift
    #icon-Gift
  • Laptop
    #icon-Laptop
  • Lock
    #icon-Lock
  • Flag
    #icon-Flag
  • Loudspeaker
    #icon-Loudspeaker
  • Integral
    #icon-Integral
  • Heart
    #icon-Heart
  • Glasses
    #icon-Glasses
  • Headset
    #icon-Headset
  • Key
    #icon-Key
  • Navigation
    #icon-Navigation
  • Moon
    #icon-Moon
  • Eye-Slash
    #icon-Eye-Slash
  • Microphone
    #icon-Microphone
  • Mobile
    #icon-Mobile
  • Hourglass
    #icon-Hourglass
  • Order
    #icon-Order
  • Home
    #icon-Home
  • Paint Roller
    #icon-a-PaintRoller
  • Medical Kit
    #icon-a-MedicalKit
  • Pause
    #icon-Pause
  • Mute
    #icon-Mute
  • Location
    #icon-Location
  • Pen
    #icon-Pen
  • Paint Brush
    #icon-a-PaintBrush
  • Play
    #icon-Play
  • Pickax
    #icon-Pickax
  • Message
    #icon-Message
  • Phone Out
    #icon-a-PhoneOut
  • Puzzle
    #icon-Puzzle
  • Plug
    #icon-Plug
  • Palm-Slash
    #icon-Palm-Slash
  • Robot
    #icon-Robot
  • Phone
    #icon-Phone
  • Red Envelopes
    #icon-a-RedEnvelopes
  • Product
    #icon-Product
  • Purse
    #icon-Purse
  • Resume
    #icon-Resume
  • Printer
    #icon-Printer
  • Sad
    #icon-Sad
  • Pet
    #icon-Pet
  • Rocket
    #icon-Rocket
  • Seal
    #icon-Seal
  • Shield
    #icon-Shield
  • Save
    #icon-Save
  • Shopping Bag
    #icon-a-ShoppingBag
  • Shopping Cart
    #icon-a-ShoppingCart
  • Shake
    #icon-Shake
  • Signboard
    #icon-Signboard
  • Slider
    #icon-Slider
  • Shoes
    #icon-Shoes
  • Step Forward
    #icon-a-StepForward
  • Share
    #icon-Share
  • Smile
    #icon-Smile
  • Stopwatch
    #icon-Stopwatch
  • Step Backward
    #icon-a-StepBackward
  • Table
    #icon-Table
  • Sub
    #icon-Sub
  • Star
    #icon-Star
  • Sound
    #icon-Sound
  • Setting
    #icon-Setting
  • Tags
    #icon-Tags
  • Tag
    #icon-Tag
  • Thunder-Normal
    #icon-Thunder-Normal
  • Tie
    #icon-Tie
  • Store
    #icon-Store
  • Thumbtack
    #icon-Thumbtack
  • Target
    #icon-Target
  • Thumb-Down
    #icon-Thumb-Down
  • Umbrella
    #icon-Umbrella
  • USB
    #icon-USB
  • Thumb-Up
    #icon-Thumb-Up
  • Toolbox
    #icon-Toolbox
  • Thunder-Slash
    #icon-Thunder-Slash
  • User-List
    #icon-User-List
  • User-Add
    #icon-User-Add
  • User-Single
    #icon-User-Single
  • Video
    #icon-Video
  • Wallet
    #icon-Wallet
  • Trophy
    #icon-Trophy
  • Wrench
    #icon-Wrench
  • User-Three
    #icon-User-Three
  • Unlock
    #icon-Unlock
  • User-Double
    #icon-User-Double
  • User-Administrator
    #icon-User-Administrator
  • Card-Credit
    #icon-Card-Credit
  • Arrow-Signle-Down
    #icon-Arrow-Signle-Down
  • Align left
    #icon-a-Alignleft
  • Align Justify
    #icon-a-AlignJustify
  • Ascending
    #icon-Ascending

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>