Font Awesome-一款吊炸天的字体图标插件中文全介绍

这款插件是一个不需要图片只需要引入一个字体文件就能制作非常多精美的图标插件,而且这些图标都是矢量的,可以无限放大,而且可以随意的改变颜色,碉堡了!!!
注意,要看一下内容必须用ie9以上或者是chrome或者是火狐浏览器浏览,ie8一下古董没效果(虽然说是支持ie7的,但是需要引入很多东西,懒得测试= =)

点击下载(版本4.0.3)

使用方法:
解压之后又四个文件夹:

1.把css和font文件夹拷贝到你的网站的目录下面,要注意的是css和font文件夹是同级的关系,css里面有两个文件一个是font-awesome.css另一个是font-awesome.min.css,这两个保留一个就行了,第二个是压缩的,我用的就是压缩的。
2.在你的网页引入一段代码

1
< link rel = "stylesheet" href = "public/css/font-awesome.min.css" >

3.在你想加入图标的地方建立一个i标签(一般都是i标签,测试一下其他的标签也是可以的),例如:。

1
< i class = "fa 这里写图标的名称" ></ i >

这样就可以了,下面是Font Awesome图标的名称大全(共369个图标):

class名称: fa-rub

class名称: fa-ruble

class名称: fa-rouble

class名称: fa-pagelines

class名称: fa-stack-exchange

class名称: fa-arrow-circle-o-right

class名称: fa-arrow-circle-o-left

class名称: fa-caret-square-o-left

class名称: fa-toggle-left

class名称: fa-dot-circle-o

class名称: fa-wheelchair

class名称: fa-vimeo-square

class名称: fa-try

class名称: fa-turkish-lira

class名称: fa-plus-square-o

class名称: fa-adjust

class名称: fa-anchor

class名称: fa-archive

class名称: fa-arrows

class名称: fa-arrows-h

class名称: fa-arrows-v

class名称: fa-asterisk

class名称: fa-ban

class名称: fa-bar-chart-o

class名称: fa-barcode

class名称: fa-bars

class名称: fa-beer

class名称: fa-bell

class名称: fa-bell-o

class名称: fa-bolt

class名称: fa-book

class名称: fa-bookmark

class名称: fa-bookmark-o

class名称: fa-briefcase

class名称: fa-bug

class名称: fa-building-o

class名称: fa-bullhorn

class名称: fa-bullseye

class名称: fa-calendar

class名称: fa-calendar-o

class名称: fa-camera

class名称: fa-camera-retro

class名称: fa-caret-square-o-down

class名称: fa-caret-square-o-left

class名称: fa-caret-square-o-right

class名称: fa-caret-square-o-up

class名称: fa-certificate

class名称: fa-check

class名称: fa-check-circle

class名称: fa-check-circle-o

class名称: fa-check-square

class名称: fa-check-square-o

class名称: fa-circle

class名称: fa-circle-o

class名称: fa-clock-o

class名称: fa-cloud

class名称: fa-cloud-download

class名称: fa-cloud-upload

class名称: fa-code

class名称: fa-code-fork

class名称: fa-coffee

class名称: fa-cog

class名称: fa-cogs

class名称: fa-comment

class名称: fa-comment-o

class名称: fa-comments

class名称: fa-comments-o

class名称: fa-compass

class名称: fa-credit-card

class名称: fa-crop

class名称: fa-crosshairs

class名称: fa-cutlery

class名称: fa-dashboard

class名称: fa-desktop

class名称: fa-dot-circle-o

class名称: fa-download

class名称: fa-edit

class名称: fa-ellipsis-h

class名称: fa-ellipsis-v

class名称: fa-envelope

class名称: fa-envelope-o

class名称: fa-eraser

class名称: fa-exchange

class名称: fa-exclamation

class名称: fa-exclamation-circle

class名称: fa-exclamation-triangle

class名称: fa-external-link

class名称: fa-external-link-square

class名称: fa-eye

class名称: fa-eye-slash

class名称: fa-female

class名称: fa-fighter-jet

class名称: fa-film

class名称: fa-filter

class名称: fa-fire

class名称: fa-fire-extinguisher

class名称: fa-flag

class名称: fa-flag-checkered

class名称: fa-flag-o

class名称: fa-flash

class名称: fa-flask

class名称: fa-folder

class名称: fa-folder-o

class名称: fa-folder-open

class名称: fa-folder-open-o

class名称: fa-frown-o

class名称: fa-gamepad

class名称: fa-gavel

class名称: fa-gear

class名称: fa-gears

class名称: fa-gift

class名称: fa-glass

class名称: fa-globe

class名称: fa-group

class名称: fa-hdd-o

class名称: fa-headphones

class名称: fa-heart

class名称: fa-heart-o

class名称: fa-home

class名称: fa-inbox

class名称: fa-info

class名称: fa-info-circle

class名称: fa-key

class名称: fa-keyboard-o

class名称: fa-laptop

class名称: fa-leaf

class名称: fa-legal

class名称: fa-lemon-o

class名称: fa-level-down

class名称: fa-level-up

class名称: fa-lightbulb-o

class名称: fa-location-arrow

class名称: fa-lock

class名称: fa-magic

class名称: fa-magnet

class名称: fa-mail-forward

class名称: fa-mail-reply

class名称: fa-mail-reply-all

class名称: fa-male

class名称: fa-map-marker

class名称: fa-meh-o

class名称: fa-microphone

class名称: fa-microphone-slash

class名称: fa-minus

class名称: fa-minus-circle

class名称: fa-minus-square

class名称: fa-minus-square-o

class名称: fa-mobile

class名称: fa-mobile-phone

class名称: fa-money

class名称: fa-moon-o

class名称: fa-music

class名称: fa-pencil

class名称: fa-pencil-square

class名称: fa-pencil-square-o

class名称: fa-phone

class名称: fa-phone-square

class名称: fa-picture-o

class名称: fa-plane

class名称: fa-plus

class名称: fa-plus-circle

class名称: fa-plus-square

class名称: fa-plus-square-o

class名称: fa-power-off

class名称: fa-print

class名称: fa-puzzle-piece

class名称: fa-qrcode

class名称: fa-question

class名称: fa-question-circle

class名称: fa-quote-left

class名称: fa-quote-right

class名称: fa-random

class名称: fa-refresh

class名称: fa-reply

class名称: fa-reply-all

class名称: fa-retweet

class名称: fa-road

class名称: fa-rocket

class名称: fa-rss

class名称: fa-rss-square

class名称: fa-search

class名称: fa-search-minus

class名称: fa-search-plus

class名称: fa-share

class名称: fa-share-square

class名称: fa-share-square-o

class名称: fa-shield

class名称: fa-shopping-cart

class名称: fa-sign-in

class名称: fa-sign-out

class名称: fa-signal

class名称: fa-sitemap

class名称: fa-smile-o

class名称: fa-sort

class名称: fa-sort-alpha-asc

class名称: fa-sort-alpha-desc

class名称: fa-sort-amount-asc

class名称: fa-sort-amount-desc

class名称: fa-sort-asc

class名称: fa-sort-desc

class名称: fa-sort-down

class名称: fa-sort-numeric-asc

class名称: fa-sort-numeric-desc

class名称: fa-sort-up

class名称: fa-spinner

class名称: fa-square

class名称: fa-square-o

class名称: fa-star

class名称: fa-star-half

class名称: fa-star-half-empty

class名称: fa-star-half-full

class名称: fa-star-half-o

class名称: fa-star-o

class名称: fa-subscript

class名称: fa-suitcase

class名称: fa-sun-o

class名称: fa-superscript

class名称: fa-tablet

class名称: fa-tachometer

class名称: fa-tag

class名称: fa-tags

class名称: fa-tasks

class名称: fa-terminal

class名称: fa-thumb-tack

class名称: fa-thumbs-down

class名称: fa-thumbs-o-down

class名称: fa-thumbs-o-up

class名称: fa-thumbs-up

class名称: fa-ticket

class名称: fa-times

class名称: fa-times-circle

class名称: fa-times-circle-o

class名称: fa-tint

class名称: fa-toggle-down

class名称: fa-toggle-left

class名称: fa-toggle-right

class名称: fa-toggle-up

class名称: fa-trash-o

class名称: fa-trophy

class名称: fa-truck

class名称: fa-umbrella

class名称: fa-unlock

class名称: fa-unlock-alt

class名称: fa-unsorted

class名称: fa-upload

class名称: fa-user

class名称: fa-users

class名称: fa-video-camera

class名称: fa-volume-down

class名称: fa-volume-off

class名称: fa-volume-up

class名称: fa-warning

class名称: fa-wheelchair

class名称: fa-wrench

class名称: fa-check-square

class名称: fa-check-square-o

class名称: fa-circle

class名称: fa-circle-o

class名称: fa-dot-circle-o

class名称: fa-minus-square

class名称: fa-minus-square-o

class名称: fa-plus-square

class名称: fa-plus-square-o

class名称: fa-square

class名称: fa-square-o

class名称: fa-bitcoin

class名称: fa-btc

class名称: fa-cny

class名称: fa-dollar

class名称: fa-eur

class名称: fa-euro

class名称: fa-gbp

class名称: fa-inr

class名称: fa-jpy

class名称: fa-krw

class名称: fa-money

class名称: fa-rmb

class名称: fa-rouble

class名称: fa-rub

class名称: fa-ruble

class名称: fa-rupee

class名称: fa-try

class名称: fa-turkish-lira

class名称: fa-usd

class名称: fa-won

class名称: fa-yen

class名称: fa-align-center

class名称: fa-align-justify

class名称: fa-align-left

class名称: fa-align-right

class名称: fa-bold

class名称: fa-chain

class名称: fa-chain-broken

class名称: fa-clipboard

class名称: fa-columns

class名称: fa-copy

class名称: fa-cut

class名称: fa-dedent

class名称: fa-eraser

class名称: fa-file

class名称: fa-file-o

class名称: fa-file-text

class名称: fa-file-text-o

class名称: fa-files-o

class名称: fa-floppy-o

class名称: fa-font

class名称: fa-indent

class名称: fa-italic

class名称: fa-link

class名称: fa-list

class名称: fa-list-alt

class名称: fa-list-ol

class名称: fa-list-ul

class名称: fa-outdent

class名称: fa-paperclip

class名称: fa-paste

class名称: fa-repeat

class名称: fa-rotate-left

class名称: fa-rotate-right

class名称: fa-save

class名称: fa-scissors

class名称: fa-strikethrough

class名称: fa-table

class名称: fa-text-height

class名称: fa-text-width

class名称: fa-th

class名称: fa-th-large

class名称: fa-th-list

class名称: fa-underline

class名称: fa-undo

class名称: fa-unlink

class名称: fa-angle-double-down

class名称: fa-angle-double-left

class名称: fa-angle-double-right

class名称: fa-angle-double-up

class名称: fa-angle-down

class名称: fa-angle-left

class名称: fa-angle-right

class名称: fa-angle-up

class名称: fa-arrow-circle-down

class名称: fa-arrow-circle-left

class名称: fa-arrow-circle-o-down

class名称: fa-arrow-circle-o-left

class名称: fa-arrow-circle-o-right

class名称: fa-arrow-circle-o-up

class名称: fa-arrow-circle-right

class名称: fa-arrow-circle-up

class名称: fa-arrow-down

class名称: fa-arrow-left

class名称: fa-arrow-right

class名称: fa-arrow-up

class名称: fa-arrows

class名称: fa-arrows-alt

class名称: fa-arrows-h

class名称: fa-arrows-v

class名称: fa-caret-down

class名称: fa-caret-left

class名称: fa-caret-right

class名称: fa-caret-square-o-down

class名称: fa-caret-square-o-left

class名称: fa-caret-square-o-right

class名称: fa-caret-square-o-up

class名称: fa-caret-up

class名称: fa-chevron-circle-down

class名称: fa-chevron-circle-left

class名称: fa-chevron-circle-right

class名称: fa-chevron-circle-up

class名称: fa-chevron-down

class名称: fa-chevron-left

class名称: fa-chevron-right

class名称: fa-chevron-up

class名称: fa-hand-o-down

class名称: fa-hand-o-left

class名称: fa-hand-o-right

class名称: fa-hand-o-up

class名称: fa-long-arrow-down

class名称: fa-long-arrow-left

class名称: fa-long-arrow-right

class名称: fa-long-arrow-up

class名称: fa-toggle-down

class名称: fa-toggle-left

class名称: fa-toggle-right

class名称: fa-toggle-up

class名称: fa-arrows-alt

class名称: fa-backward

class名称: fa-compress

class名称: fa-eject

class名称: fa-expand

class名称: fa-fast-backward

class名称: fa-fast-forward

class名称: fa-forward

class名称: fa-pause

class名称: fa-play

class名称: fa-play-circle

class名称: fa-play-circle-o

class名称: fa-step-backward

class名称: fa-step-forward

class名称: fa-stop

class名称: fa-youtube-play

class名称: fa-adn

class名称: fa-android

class名称: fa-apple

class名称: fa-bitbucket

class名称: fa-bitbucket-square

class名称: fa-bitcoin

class名称: fa-btc

class名称: fa-css3

class名称: fa-dribbble

class名称: fa-dropbox

class名称: fa-facebook

class名称: fa-facebook-square

class名称: fa-flickr

class名称: fa-foursquare

class名称: fa-github

class名称: fa-github-alt

class名称: fa-github-square

class名称: fa-gittip

class名称: fa-google-plus

class名称: fa-google-plus-square

class名称: fa-html5

class名称: fa-instagram

class名称: fa-linkedin

class名称: fa-linkedin-square

class名称: fa-linux

class名称: fa-maxcdn

class名称: fa-pagelines

class名称: fa-pinterest

class名称: fa-pinterest-square

class名称: fa-renren

class名称: fa-skype

class名称: fa-stack-exchange

class名称: fa-stack-overflow

class名称: fa-trello

class名称: fa-tumblr

class名称: fa-tumblr-square

class名称: fa-twitter

class名称: fa-twitter-square

class名称: fa-vimeo-square

class名称: fa-vk

class名称: fa-weibo

class名称: fa-windows

class名称: fa-xing

class名称: fa-xing-square

class名称: fa-youtube

class名称: fa-youtube-play

class名称: fa-youtube-square

class名称: fa-ambulance

class名称: fa-h-square

class名称: fa-hospital-o

class名称: fa-medkit

class名称: fa-plus-square

class名称: fa-stethoscope

class名称: fa-user-md

class名称: fa-wheelchair

Font Awesome 官网: http://fontawesome.io/


from: http://www.8abd.com/?p=1142

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Yarn 是一个用于管理项目中依赖包的工具,而 fontawesome-free-5.15.4-web 是一个免费的字体图标库。如果想在项目中使用 fontawesome-free-5.15.4-web,可以通过以下步骤使用 Yarn 引用该库: 1. 首先,在项目的根目录下打开命令行终端。 2. 运行命令 "yarn init",这会创建一个新的 package.json 文件,用于记录项目的信息和依赖包。 3. 在 package.json 文件中的 "dependencies" 字段中添加依赖项 "fontawesome-free": "5.15.4"。 4. 运行命令 "yarn" 或 "yarn install",这会下载并安装所有的依赖包,包括 fontawesome-free-5.15.4-web。 5. 在项目的某个文件中引入 fontawesome 的 CSS 文件。例如,在 HTML 文件中可以添加以下代码:`<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.css">`。 6. 在需要使用字体图标的地方,可以直接使用相应的 HTML 代码。例如,要使用一个用户图标,可以使用 `<i class="fas fa-user"></i>`。 通过以上步骤,我们可以在项目中成功引用和使用 fontawesome-free-5.15.4-web,从而添加丰富的字体图标来美化我们的页面。 ### 回答2: 要在yarn中引用fontawesome-free-5.15.4-web,需要进行以下步骤: 1. 打开终端或命令行界面,并确保已在项目的根目录下。 2. 运行以下命令来初始化一个新的yarn项目: ``` yarn init ``` 按照提示填写项目的名称、版本号等信息。 3. 在终端或命令行界面中运行以下命令来安装fontawesome-free-5.15.4-web: ``` yarn add @fortawesome/fontawesome-free@5.15.4 ``` 这将会下载和安装fontawesome的最新版本。 4. 在项目文件夹中创建一个名为"src"的文件夹(如果还没有)。 5. 在"src"文件夹中创建一个名为"index.js"的文件,并在其中添加以下代码: ```javascript import '@fortawesome/fontawesome-free/css/all.css'; ``` 这将会引用fontawesome的CSS文件,其中包含了所需的图标样式。 6. 在需要使用fontawesome图标的页面或组件中引入"index.js"文件即可: ```javascript import './src/index.js'; ``` 现在,你可以在项目中使用fontawesome提供的图标了。 以上是通过yarn引用fontawesome-free-5.15.4-web的步骤。记得根据实际情况修改文件路径和文件名。如果一切顺利,你的项目应该可以成功使用fontawesome图标库。 ### 回答3: 要在项目中引用 fontawesome-free-5.15.4-web,可以使用 yarn 这个包管理工具来安装和管理字体图标库。 首先,在终端或命令行工具中进入项目的根目录,然后执行以下命令来初始化一个新的 yarn 项目: ``` yarn init ``` 接下来,执行以下命令来安装 fontawesome-free-5.15.4-web 包: ``` yarn add @fortawesome/fontawesome-free ``` 这个命令会从 yarn 的包仓库中下载安装 fontawesome-free-5.15.4-web 这个包,然后将它添加到项目的依赖中。 安装完成后,可以在项目的代码中引用字体图标库。根据具体需求,可以在 HTML 文件或脚本文件中添加以下代码来引用 fontawesome-free-5.15.4-web: ```html <!-- 引入字体文件 --> <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css"> <!-- 使用字体图标 --> <i class="fas fa-check"></i> ``` 以上代码中,`node_modules` 是 yarn 安装依赖包的默认目录,`@fortawesome/fontawesome-free/css/all.css` 是字体图标库的样式文件路径。`<i class="fas fa-check"></i>` 是使用一个名为 "check" 的字体图标,通过 `class` 属性来指定图标的样式。 这样,就可以在项目中成功引用 fontawesome-free-5.15.4-web 字体图标库了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值