零基础建站培训教程介绍

当前位置:

什么是字体图标,怎么用?

什么是字体图标

字体图标简单的说,就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样。如下图:

字体图标

字体图标最大的好处,在于它不会变形和加载速度快。字体图标可以像文字一样,随意通过CSS来控制它的大小和颜色,对于建网站来说,非常方便。(如果不懂CSS,可以学习一下CSS视频教程

字体图标使用方法

我们常用的字体图标是font-awesome图标,它的使用分为二步:

第一步:引入font-awesome图标,将下面的代码放到</head>标签上方就引入成功了。(如果不懂HTML,请学习一下html视频教程


<link href="http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

第二步:使用提供的字体图标标签来调用相应的字体图标。如下图这段标签就可以显示一个“照片机”的图标;


<i class="fa fa-camera-retro fa-lg"></i>

字体图标使用举例

下面是常用的字体图标代码标签:(更多字体图标,可查看:http://www.fontawesome.com.cn/faicons/)

fa-automobile (别称)

fa-bank (别称)

fa-behance

fa-behance-square

fa-bomb

fa-building

fa-cab (别称)

fa-car

fa-child

fa-circle-o-notch

fa-circle-thin

fa-codepen

fa-cube

fa-cubes

fa-database

fa-delicious

fa-deviantart

fa-digg

fa-drupal

fa-empire

fa-envelope-square

fa-fax

fa-file-archive-o

fa-file-audio-o

fa-file-code-o

fa-file-excel-o

fa-file-image-o

fa-file-movie-o (别称)

fa-file-pdf-o

fa-file-photo-o (别称)

fa-file-picture-o (别称)

fa-file-powerpoint-o

fa-file-sound-o (别称)

fa-file-video-o

fa-file-word-o

fa-file-zip-o (别称)

fa-ge (别称)

fa-git

fa-git-square

fa-google

fa-graduation-cap

fa-hacker-news

fa-header

fa-history

fa-institution (别称)

fa-joomla

fa-jsfiddle

fa-language

fa-life-bouy (别称)

fa-life-ring

fa-life-saver (别称)

fa-mortar-board (别称)

fa-openid

fa-paper-plane

fa-paper-plane-o

fa-paragraph

fa-paw

fa-pied-piper

fa-pied-piper-alt

fa-pied-piper-square (别称)

fa-qq

fa-ra (别称)

fa-rebel

fa-recycle

fa-reddit

fa-reddit-square

fa-send (别称)

fa-send-o (别称)

fa-share-alt

fa-share-alt-square

fa-slack

fa-sliders

fa-soundcloud

fa-space-shuttle

fa-spoon

fa-spotify

fa-steam

fa-steam-square

fa-stumbleupon

fa-stumbleupon-circle

fa-support (别称)

fa-taxi

fa-tencent-weibo

fa-tree

fa-university

fa-vine

fa-wechat (别称)

fa-weixin

fa-wordpress

fa-yahoo

Web应用图标

 

fa-adjust

fa-anchor

fa-archive

fa-arrows

fa-arrows-h

fa-arrows-v

fa-asterisk

fa-automobile (别称)

fa-ban

fa-bank (别称)

fa-bar-chart-o

fa-barcode

fa-bars

fa-beer

fa-bell

fa-bell-o

fa-bolt

fa-bomb

fa-book

fa-bookmark

fa-bookmark-o

fa-briefcase

fa-bug

fa-building

fa-building-o

fa-bullhorn

fa-bullseye

fa-cab (别称)

fa-calendar

fa-calendar-o

fa-camera

fa-camera-retro

fa-car

fa-caret-square-o-down

fa-caret-square-o-left

fa-caret-square-o-right

fa-caret-square-o-up

fa-certificate

fa-check

fa-check-circle

fa-check-circle-o

fa-check-square

fa-check-square-o

fa-child

fa-circle

fa-circle-o

fa-circle-o-notch

fa-circle-thin

fa-clock-o

fa-cloud

fa-cloud-download

fa-cloud-upload

fa-code

fa-code-fork

fa-coffee

fa-cog

fa-cogs

fa-comment

fa-comment-o

fa-comments

fa-comments-o

fa-compass

fa-credit-card

fa-crop

fa-crosshairs

fa-cube

fa-cubes

fa-cutlery

fa-dashboard (别称)

fa-database

fa-desktop

fa-dot-circle-o

fa-download

fa-edit (别称)

fa-ellipsis-h

fa-ellipsis-v

fa-envelope

fa-envelope-o

fa-envelope-square

fa-eraser

fa-exchange

fa-exclamation

fa-exclamation-circle

fa-exclamation-triangle

fa-external-link

fa-external-link-square

fa-eye

fa-eye-slash

fa-fax

fa-female

fa-fighter-jet

fa-file-archive-o

fa-file-audio-o

fa-file-code-o

fa-file-excel-o

fa-file-image-o

fa-file-movie-o (别称)

fa-file-pdf-o

fa-file-photo-o (别称)

fa-file-picture-o (别称)

fa-file-powerpoint-o

fa-file-sound-o (别称)

fa-file-video-o

fa-file-word-o

fa-file-zip-o (别称)

fa-film

fa-filter

fa-fire

fa-fire-extinguisher

fa-flag

fa-flag-checkered

fa-flag-o

fa-flash (别称)

fa-flask

fa-folder

fa-folder-o

fa-folder-open

fa-folder-open-o

fa-frown-o

fa-gamepad

fa-gavel

fa-gear (别称)

fa-gears (别称)

fa-gift

fa-glass

fa-globe

fa-graduation-cap

fa-group (别称)

fa-hdd-o

fa-headphones

fa-heart

fa-heart-o

fa-history

fa-home

fa-image (别称)

fa-inbox

fa-info

fa-info-circle

fa-institution (别称)

fa-key

fa-keyboard-o

fa-language

fa-laptop

fa-leaf

fa-legal (别称)

fa-lemon-o

fa-level-down

fa-level-up

fa-life-bouy (别称)

fa-life-ring

fa-life-saver (别称)

fa-lightbulb-o

fa-location-arrow

fa-lock

fa-magic

fa-magnet

fa-mail-forward (别称)

fa-mail-reply (别称)

fa-mail-reply-all (别称)

fa-male

fa-map-marker

fa-meh-o

fa-microphone

fa-microphone-slash

fa-minus

fa-minus-circle

fa-minus-square

fa-minus-square-o

fa-mobile

fa-mobile-phone (别称)

fa-money

fa-moon-o

fa-mortar-board (别称)

fa-music

fa-navicon (别称)

fa-paper-plane

fa-paper-plane-o

fa-paw

fa-pencil

fa-pencil-square

fa-pencil-square-o

fa-phone

fa-phone-square

fa-photo (别称)

fa-picture-o

fa-plane

fa-plus

fa-plus-circle

fa-plus-square

fa-plus-square-o

fa-power-off

fa-print

fa-puzzle-piece

fa-qrcode

fa-question

fa-question-circle

fa-quote-left

fa-quote-right

fa-random

fa-recycle

fa-refresh

fa-reorder (别称)

fa-reply

fa-reply-all

fa-retweet

fa-road

fa-rocket

fa-rss

fa-rss-square

fa-search

fa-search-minus

fa-search-plus

fa-send (别称)

fa-send-o (别称)

fa-share

fa-share-alt

fa-share-alt-square

fa-share-square

fa-share-square-o

fa-shield

fa-shopping-cart

fa-sign-in

fa-sign-out

fa-signal

fa-sitemap

fa-sliders

fa-smile-o

fa-sort

fa-sort-alpha-asc

fa-sort-alpha-desc

fa-sort-amount-asc

fa-sort-amount-desc

fa-sort-asc

fa-sort-desc

fa-sort-down (别称)

fa-sort-numeric-asc

fa-sort-numeric-desc

fa-sort-up (别称)

fa-space-shuttle

fa-spinner

fa-spoon

fa-square

fa-square-o

fa-star

fa-star-half

fa-star-half-empty (别称)

fa-star-half-full (别称)

fa-star-half-o

fa-star-o

fa-suitcase

fa-sun-o

fa-support (别称)

fa-tablet

fa-tachometer

fa-tag

fa-tags

fa-tasks

fa-taxi

fa-terminal

fa-thumb-tack

fa-thumbs-down

fa-thumbs-o-down

fa-thumbs-o-up

fa-thumbs-up

fa-ticket

fa-times

fa-times-circle

fa-times-circle-o

fa-tint

fa-toggle-down (别称)

fa-toggle-left (别称)

fa-toggle-right (别称)

fa-toggle-up (别称)

fa-trash-o

fa-tree

fa-trophy

fa-truck

fa-umbrella

fa-university

fa-unlock

fa-unlock-alt

fa-unsorted (别称)

fa-upload

fa-user

fa-users

fa-video-camera

fa-volume-down

fa-volume-off

fa-volume-up

fa-warning (别称)

fa-wheelchair

fa-wrench

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程