Produtos
Filtros da busca:
Filtrando por:
FC 14223 :: Como utilizar ícones do Foundation no formato de fonte?
Esta biblioteca inclui dezenas de ícones que podem ser utilizados mesmo em lojas que não utilizam o Foundation.
OBS: O uso do formato de fonte é recomendado somente se a loja utilizar muitos ícones desta biblioteca. Caso contrário, utilize o formato SVG.
Segue o passo a passo para utilizar os ícones do Foundation através da inclusão de arquivo de fonte:
1º Passo
Insira a seguinte linha no início do arquivo BarraTopo.htm:
<link type="text/css" rel="stylesheet" href="/icons/FoundationV1/font/foundation-icons.css" media="all">
2º Passo
Escolha o ícone a inserir e defina em qual arquivo você deseja inseri-lo (topo, rodapé, home, detalhes de produtos etc).
3º Passo
No exemplo abaixo, altere o nome que está em negrito para o nome do ícone que deseja utilizar. Em seguida, insira esta linha no arquivo htm que exibirá o ícone.
Exemplo:
<i class="FoundationIconFC fi-zoom-in"></i>
4º Passo
Para aumentar o tamanho e a cor do ícone, utilize os atributos font-size e color na classe FoundationIconFC.
No arquivo LojaSite.css, insira a classe abaixo:
.FoundationIconFC{font-size:25px;color:#FF6600;}
Lista de ícones e respectivas classes:
heart
star
plus
minus
x
check
upload
download
widget
marker
refresh
home
trash
paperclip
lock
unlock
calendar
cloud
magnifying-glass
zoom-out
zoom-in
wrench
rss
share
flag
list-thumbnails
list
thumbnails
annotate
folder
folder-lock
folder-add
clock
play-video
crop
archive
pencil
graph-trend
graph-bar
graph-horizontal
graph-pie
checkbox
minus-circle
x-circle
eye
database
results
results-demographics
like
dislike
upload-cloud
camera
alert
bookmark
contrast
results-mail
video
telephone
comment
comment-video
comment-quotes
comment-minus
comments
microphone
megaphone
sound
address-book
bluetooth
html5
css3
layout
web
foundation
page
page-csv
page-doc
page-pdf
page-export
page-export-csv
page-export-doc
page-export-pdf
page-add
page-remove
page-delete
page-edit
page-search
page-copy
page-filled
page-multiple
arrow-up
arrow-right
arrow-down
arrow-left
arrows-out
arrows-in
arrows-expand
arrows-compress
torso
torso-female
torsos
torsos-female-male
torsos-male-female
torsos-all
torsos-all-female
torso-business
monitor
laptop
tablet-portrait
tablet-landscape
mobile
mobile-signal
usb
bold
italic
underline
strike
text-color
background-color
superscript
subscript
align-left
align-center
align-right
align-justify
list-numbered
list-bullet
indent-more
indent-less
print
save
photo
filter
paint-bucket
link
unlink
quote
play
stop
pause
previous
rewind
fast-forward
next
record
play-circle
volume-none
volume
volume-strike
loop
shuffle
eject
rewind-ten
dollar
euro
pound
yen
bitcoin
bitcoin-circle
credit-card
shopping-cart
burst
burst-new
burst-sale
paypal
price-tag
pricetag-multiple
shopping-bag
dollar-bill
wheelchair
braille
closed-caption
blind
asl
hearing-aid
guide-dog
universal-access
telephone-accessible
elevator
male
female
male-female
male-symbol
female-symbol
social-500px
social-adobe
social-amazon
social-android
social-apple
social-behance
social-bing
social-blogger
social-delicious
social-designer-news
social-deviant-art
social-digg
social-dribbble
social-drive
social-dropbox
social-evernote
social-facebook
social-flickr
social-forrst
social-foursquare
social-game-center
social-github
social-google-plus
social-hacker-news
social-hi5
social-instagram
social-joomla
social-lastfm
social-linkedin
social-medium
social-myspace
social-orkut
social-path
social-picasa
social-pinterest
social-rdio
social-reddit
social-skype
social-skillshare
social-smashing-mag
social-snapchat
social-spotify
social-squidoo
social-stack-overflow
social-steam
social-stumbleupon
social-treehouse
social-tumblr
social-twitter
social-vimeo
social-windows
social-xbox
social-yahoo
social-yelp
social-youtube
social-zerply
social-zurb
compass
music
lightbulb
battery-full
battery-half
battery-empty
projection-screen
info
power
asterisk
at-sign
key
ticket
book
book-bookmark
anchor
puzzle
foot
paw
mountains
trees
sheriff-badge
first-aid
trophy
prohibited
no-dogs
no-smoking
safety-cone
shield
crown
target
target-two
die-one
die-two
die-three
die-four
die-five
die-six
skull
map
clipboard
clipboard-pencil
clipboard-notes
|
