学做网站培训课程介绍

当前位置:

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

本课程视频是VIP会员课程,学习请进入VIP学习区

什么是字体图标

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

字体图标

字体图标最大的好处,在于它不会变形和加载速度快。字体图标可以像文字一样,随意通过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>

字体图标使用举例

下面是常用的字体图标代码标签:(更多字体图标,可查看: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

发表评论

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

相关教程

  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • 由于WP开始自动调用谷哥字体,会导致自己做网站时打开后台很慢,我们只需要屏蔽谷歌字体。在之前我们讲到使用代码方式屏蔽谷歌字体,现在学做网站论坛
  • CSS网页布局中字体样式 图文教程 (121616 次浏览)
    在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:字体的大小:font-size
  • 网站favicon图标如何制作 图文教程 (120322 次浏览)
    在我们上网的时候,看到有许多网站,当打开它的时候,在浏览器中会出现它们网站的图标,特别的个性化。很多学做网站的学员也问过这样的问题,询问网站f
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。
  • 在使用WP程序做网站时,登录网站后台时,程序会自动调用程序的默认图标,对于不想让别人知道自己网站程序的学建站学员来说,就需要将这个图标替换成自