amazeui学习笔记--css（常用组件6）--图标Icon

一、总结

1、关注用法即可：在 HTML 上添加添加 am-icon-{图标名称} class。  Wechat

2、图标大小：

.am-icon-sm，放大 150%
.am-icon-md，放大 200%
.am-icon-lg，放大 250%

3、icon button：在 Icon 上添加 .am-icon-btn class。 <a href="##" class="am-icon-btn am-icon-twitter"></a>

4、旋转动画：注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素才会应用旋转动画。 

5、固定宽度（非常有用）：FontAwesome 在绘制图标的时候不同图标宽度有差异，添加 .am-icon-fw 将图标设置为固定的宽度，解决宽度不一致问题（v2.3 新增）。 <li> QQ</li>

6、图标不支持的情况可以直接写编码形式： What a fuck.

二、图标Icon

Icon

使用方法

添加 Class

在 HTML 上添加添加 am-icon-{图标名称} class。

Copy

QQ Wechat

<span class="am-icon-qq"> QQ</span> <span class="am-icon-weixin"> Wechat</span>

使用 Mixin

LESS 用户可以调用 mixin 编写样式：

在要设置 Icon 的元素里调用 .am-icon-font mixin 设置字体；
content 设置为 Icon 名称对应的变量 content: @fa-var-{图标名称}。

Copy

新浪微博

<span class="doc-icon-custom"> 新浪微博</span>

Copy

.doc-icon-custom {&:before {.am-icon-font;content: @fa-var-weibo;}
}

修改字体路径

~~字体图标目前引了 Staticfile CDN 上的文件（支持 HTTPS），可以自行替换：~~编译好的 CSS 中已经替换为本地文件。

使用 LESS：通过设置变量 @fa-font-path 覆盖默认的值，如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。
直接使用 CSS：查找替换 //dn-staticfile.qbox.me/font-awesome/4.2.0/fonts/。

图标大小

.am-icon-sm，放大 150%
.am-icon-md，放大 200%
.am-icon-lg，放大 250%

Copy

默认大小

.am-icon-sm

.am-icon-md

.am-icon-lg

<p><span class="am-icon-home"></span> 默认大小</p> <p><span class="am-icon-home am-icon-sm"></span> .am-icon-sm</p> <p><span class="am-icon-home am-icon-md"></span> .am-icon-md</p> <p><span class="am-icon-home am-icon-lg"></span> .am-icon-lg</p>

Icon button

在 Icon 上添加 .am-icon-btn class。

如果需要设置 Icon Button 的颜色，可以添加以下 class：

.am-primary
.am-secondary
.am-success
.am-warning
.am-danger

Copy

<a href="##" class="am-icon-btn am-icon-twitter"></a> <a href="##" class="am-icon-btn am-icon-facebook"></a> <a href="##" class="am-icon-btn am-icon-github"></a> <a href="##" class="am-icon-btn am-primary am-icon-qq"></a> <a href="##" class="am-icon-btn am-secondary am-icon-drupal"></a> <a href="##" class="am-icon-btn am-success am-icon-shield"></a> <a href="##" class="am-icon-btn am-warning am-icon-warning"></a> <a href="##" class="am-icon-btn am-danger am-icon-youtube"></a>

旋转动画

注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素才会应用旋转动画。

Copy

<i class="am-icon-spinner am-icon-spin"></i> <i class="am-icon-refresh am-icon-spin"></i> <i class="am-icon-circle-o-notch am-icon-spin"></i> <i class="am-icon-cog am-icon-spin"></i> <i class="am-icon-gear am-icon-spin"></i>

v2.3 新增动画：

Copy

<i class="am-icon-spinner am-icon-pulse"></i>

固定宽度

FontAwesome 在绘制图标的时候不同图标宽度有差异，添加 .am-icon-fw 将图标设置为固定的宽度，解决宽度不一致问题（v2.3 新增）。

Copy

QQ
Skype
GitHub
Amex

<ul><li><i class="am-icon-qq am-icon-fw"></i> QQ</li> <li><i class="am-icon-skype am-icon-fw"></i> Skype</li> <li><i class="am-icon-github am-icon-fw"></i> GitHub</li> <li><i class="am-icon-cc-amex am-icon-fw"></i> Amex</li> </ul>

复制图标

鼠标移到图标上会显示两个小按钮：

class: 复制 class 名称，用于可修改 DOM 结构的场景，如点击 copy 图标旁的 class 按钮复制结果为 am-icon-copy；
style: 复制 Icon 样式，用于无法修改 DOM 结构通过样式添加 Icon 的场景，如点击 copy 图标旁的 style按钮复制结果为

Copy

{.am-icon-font;content: @fa-var-copy;
}

存在问题

关于部分奇葩用户代理不显示字体图标

2016.07.11 update:

经网友测试研究，某些安卓手机（如酷派某些型号）不显示字体图标，原因出在 @font-face 中引入了 svg 格式的字体，这些机型解析时出错，即便包含其他格式的字体，也无法正确显示。

解决方法是删除 svg 格式字体的引用，svg 格式提供给 iOS Safari 4.1- 使用，删除并无负面影响。Amaze UI 2.7.1 中已经做删除处理。

以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font，原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码，详情参考 Iconfont 在移动端遇到问题的探讨，可以通过这个页面进行测试。

~~解决方式有两种：~~

~~将 Icon Font 编码限制在 4 位：Amaze UI 直接使用 Font Awesome，不可能去调整近 500 个图标的编码。~~
~~将 Icon Font 的编码直接以内容的形式写进 HTML。~~

Copy

 What a fuck.

<span> What a fuck.</span>

Amaze UI 的定位是面向现代浏览器，虽然对 IE 8/9 这些浏览器提供了有限支持，但这都是在不改变基础架构、不耗费过多精力的前提下。安卓碎片化严重，更恶心的是一些厂商还随意修改浏览器内核，Amaze UI 不可能做到全部兼容，也不可能为极个别的用户代理调整架构、耗费过多精力。

云适配内部有数千个网站在使用 Amaze UI，截止目前还没有接到过图标不显示的反馈。显然，遇到这些问题的用户需要权衡处理这个问题的成本与收益。

v2.3 update:

有用户在评论中说以下写法可以解决图标不显示的问题，v2.3 中已经调整为以下写法，遇到过问题的用户可以测试一下。

Copy

/* 安卓手机端Icon不能正确显示的处理办法：*/
[class*='am-icon-']:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

所有图标列表

Font Awesome 4.6 新增字体（Amaze UI 2.7 中搭载）

american-sign-language-interpreting
asl-interpreting (alias)
assistive-listening-systems
audio-description
blind
braille
deaf
deafness (alias)
envira
fa (alias)
first-order
font-awesome
gitlab
glide
glide-g
google-plus-circle (alias)
google-plus-official
hard-of-hearing (alias)
instagram
low-vision
pied-piper
question-circle-o
sign-language
signing (alias)
snapchat
snapchat-ghost
snapchat-square
themeisle
universal-access
viadeo
viadeo-square
volume-control-phone
wheelchair-alt
wpbeginner
wpforms
yoast

Font Awesome 4.5 新增字体（Amaze UI 2.5 中搭载）

bluetooth
bluetooth-b
codiepie
credit-card-alt
edge
fort-awesome
hashtag
mixcloud
modx
pause-circle
pause-circle-o
percent
product-hunt
reddit-alien
scribd
shopping-bag
shopping-basket
stop-circle
stop-circle-o
usb

Font Awesome 4.4 新增字体（Amaze UI 2.5 中搭载）

500px
amazon
balance-scale
battery-0 (alias)
battery-1 (alias)
battery-2 (alias)
battery-3 (alias)
battery-4 (alias)
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
black-tie
calendar-check-o
calendar-minus-o
calendar-plus-o
calendar-times-o
cc-diners-club
cc-jcb
chrome
clone
commenting
commenting-o
contao
creative-commons
expeditedssl
firefox
fonticons
genderless
get-pocket
gg
gg-circle
hand-grab-o (alias)
hand-lizard-o
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
hourglass
hourglass-1 (alias)
hourglass-2 (alias)
hourglass-3 (alias)
hourglass-end
hourglass-half
hourglass-o
hourglass-start
houzz
i-cursor
industry
internet-explorer
map
map-o
map-pin
map-signs
mouse-pointer
object-group
object-ungroup
odnoklassniki
odnoklassniki-square
opencart
opera
optin-monster
registered
safari
sticky-note
sticky-note-o
television
trademark
tripadvisor
tv (alias)
vimeo
wikipedia-w
y-combinator
yc (alias)

Font Awesome 4.3 新增字体（Amaze UI 2.2 中搭载）

bed
buysellads
cart-arrow-down
cart-plus
connectdevelop
dashcube
diamond
facebook-official
forumbee
heartbeat
hotel (alias)
leanpub
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
medium
mercury
motorcycle
neuter
pinterest-p
sellsy
server
ship
shirtsinbulk
simplybuilt
skyatlas
street-view
subway
train
transgender
transgender-alt
user-plus
user-secret
user-times
venus
venus-double
venus-mars
viacoin
whatsapp

40 New Icons in 4.2

angellist
area-chart
at
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bus
calculator
cc
cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
copyright
eyedropper
futbol-o
google-wallet
ils
ioxhost
lastfm
lastfm-square
line-chart
meanpath
newspaper-o
paint-brush
paypal
pie-chart
plug
shekel (alias)
sheqel (alias)
slideshare
soccer-ball-o (alias)
toggle-off
toggle-on
trash
tty
twitch
wifi
yelp

Web Application Icons

adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
comments
comments-o
compass
copyright
credit-card
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
graduation-cap
group (alias)
hdd-o
headphones
heart
heart-o
history
home
image (alias)
inbox
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
music
navicon (alias)
newspaper-o
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (alias)
send-o (alias)
share
share-alt
share-alt-square
share-square
share-square-o
shield
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trash
trash-o
tree
trophy
truck
tty
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
user
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench

File Type Icons

file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-o
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-text
file-text-o
file-video-o
file-word-o
file-zip-o (alias)

Spinner Icons

These icons work great with the am-icon-spin class. Check out the spinning icons example.

circle-o-notch
cog
gear (alias)
refresh
spinner

Form Control Icons

check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o

Payment Icons

cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
google-wallet
paypal

Chart Icons

area-chart
bar-chart
bar-chart-o (alias)
line-chart
pie-chart

Currency Icons

bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
ils
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
shekel (alias)
sheqel (alias)
try
turkish-lira (alias)
usd
won (alias)
yen (alias)

Text Editor Icons

align-center
align-justify
align-left
align-right
bold
chain (alias)
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
header
indent
italic
link
list
list-alt
list-ol
list-ul
outdent
paperclip
paragraph
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
subscript
superscript
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)

Directional Icons

angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)

Video Player Icons

arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
play
play-circle
play-circle-o
step-backward
step-forward
stop
youtube-play

Brand Icons

All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.

adn
android
angellist
apple
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
btc
cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
codepen
css3
delicious
deviantart
digg
dribbble
dropbox
drupal
empire
facebook
facebook-square
flickr
foursquare
ge (alias)
git
git-square
github
github-alt
github-square
gittip
google
google-plus
google-plus-square
google-wallet
hacker-news
html5
instagram
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
linkedin
linkedin-square
linux
maxcdn
meanpath
openid
pagelines
paypal
pied-piper
pied-piper-alt
pinterest
pinterest-square
qq
ra (alias)
rebel
reddit
reddit-square
renren
share-alt
share-alt-square
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
trello
tumblr
tumblr-square
twitch
twitter
twitter-square
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
windows
wordpress
xing
xing-square
yahoo
yelp
youtube
youtube-play
youtube-square

Medical Icons

ambulance
h-square
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair

Issue 列表

部署在HTTPS服务器上，会出现不安全资源的提示closed
CSS: Font ICON 在部分设备中不显示