在bootstrap4中使用font-awesome图标
2020-06-16 23:33:00 by wst
bootstrap由于在bootstrap4中默认不提供字体，这里记录下整个的使用过程。分为四个步骤：下载文件，拷贝文件，引用css文件，使用样式；
下载文件
首先我们要下载bootstrap4的压缩包以及font-awesome图标文件。
如果下载失败，可使用我下载好的文件：链接: https://pan.baidu.com/s/1KiBiVYhsqpVR_rTbLaV3PA 提取码: 5f3z
拷贝文件
下载好的目录结构如下：
移动方法：
1.把左边的css中的文件放到右边的css文件夹中；
2. 把左边的font文件夹移动到右边的目录（bootstrap-4.5.0-dist）里；
3. 把bootstrap-4.5.0-dist拷贝到自己的项目中；
4. 把jquery.zip解压后的文件夹放入（bootstrap-4.5.0-dist）中；
引用css文件
假设你的html文件和bootstrap-4.5.0-dist在同级目录，引用方法如下：
<link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
<link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/font-awesome.min.css">
使用样式
如：使用手机图标（icon-mobile-phone）和下三角标（icon-caret-down）。
完整的图标列表：https://www.bootcss.com/p/font-awesome/#
完整HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>易学教育-IT人的自我成长中心</title>
<link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
<link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/font-awesome.min.css">
<style>
body{
font-size: 13px;
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
color: #000;
}
.top-bar{
background-color: red;
}
</style>
</head>
<body>
<header id="yx-header">
<div class="top-bar">
<div class="container">
<div class="row">
<div class="top-bar-1">
<a href="">
<i class="icon-mobile-phone"></i>
<span>关注微信号</span>
<span class="icon-caret-down"></span>
</a>
</div>
</div>
</div>
</div>
</header>
<script src="./bootstrap-4.5.0-dist/jquery/jquery-3.5.1.js"></script>
</body>
</html>
福利：为了防止小伙伴拷贝出错了，这里列出完整的代码：
链接: https://pan.baidu.com/s/1u0jz9HbpIKDht5UqbGrCDA 提取码: qab7
Comments(135) Add Your Comment
Charlesnag
“I haven’t seen you in these parts,” the barkeep said, sidling during to where I sat. “Personage’s Bao.” He stated it exuberantly, as if low-down of his exploits were shared aside settlers around multitudinous a firing in Aeternum. He waved to a unimpassioned tun upset us, and I returned his token with a nod. He filled a eyeglasses and slid it to me across the stained red wood of the excluding before continuing. “As a betting chains, I’d be assenting to wager a adequate bit of invent you’re in Ebonscale Reach for the purpose more than the swig and sights,” he said, eyes glancing from the sword sheathed on my cool to the bend slung across my back. http://images.google.fm/url?q=https://renewworld.ru/sistemnye-trebovaniya-new-world/
Kevingaw
https://www.google.sn/url?q=http://dolce-vita.com/wp-content/pages/welche_kasinos_gewinnen_.html https://www.feldbahn-ffm.de/wp-content/pages/wie_man_blackjack_in_einem_casino_spielt_und_gewinnt.html https://www.google.dm/url?q=http://team75motorsport.de/wp-content/pages/gibt_es_ein_kasino_in_polen__erlaubte_kasinos_und_wettanbieter_in_polen.html http://lehrcare.de/pages/pgs/die_besten_casinos_von_las_vegas_in_downtown__fremont_street_.html https://www.google.com.pk/url?q=https://stakesappbonus.com/
Jhfvnu
atorvastatin for sale online <a href="https://lipiws.top/">order lipitor without prescription</a> lipitor 10mg brand
Qoikgt
cipro pill - <a href="https://cipropro.top/keflexcapsule/">cephalexin 500mg cheap</a> buy augmentin 375mg online cheap
Wgxrkf
order cipro 1000mg for sale - <a href="https://metroagyl.top/">cipro brand</a> buy augmentin 1000mg online cheap
Uvlthx
buy generic flagyl 400mg - <a href="https://metroagyl.top/cefaclor/">buy cheap generic cefaclor</a> buy azithromycin online cheap
Wminjn
ciplox 500 mg pill - <a href="https:/septrim.top/">buy cheap ciplox</a> buy erythromycin generic
Splfsr
purchase valtrex pills - <a href="https://gnantiviralp.com/vermox/">purchase vermox sale</a> buy acyclovir
Otrxmr
ivermectin for humans for sale - <a href="https://keflexin.top/amoxiclav/">order amoxiclav pill</a> brand tetracycline 250mg
Qzwese
buy metronidazole 400mg generic - <a href="https://metroagyl.top/clindamycin/">cleocin 150mg sale</a> buy azithromycin no prescription
Bgtblr
ampicillin us <a href="https://ampiacil.top/amoxil500/">cheap amoxicillin</a> amoxicillin tablet
Jgmuzv
order lasix 100mg online cheap - <a href="https://antipathogenc.com/capoten/">captopril 25 mg brand</a> captopril 25 mg pill
Brblvr
glycomet 500mg price - <a href="https://gnantiacidity.com/">glucophage 1000mg cost</a> lincocin 500 mg for sale
Vwwgia
order retrovir 300 mg online pill - <a href="https://canadiangnp.com/rulide/">buy roxithromycin 150mg online cheap</a> allopurinol 100mg generic
Raysqw
purchase clozaril online - <a href="https://genonlinep.com/accupril/">order accupril 10mg pills</a> buy pepcid medication
Cmubah
order quetiapine 100mg generic - <a href="https://gnkantdepres.com/effexor/">effexor 150mg brand</a> eskalith drug
Adnykr
generic anafranil 25mg - <a href="https://antdeponline.com/tofranil/">imipramine cheap</a> sinequan 25mg uk
Yxnzsa
buy atarax pill - <a href="https://antdepls.com/endep/">endep 10mg generic</a> order endep 10mg pill
Drvbci
augmentin 1000mg for sale - <a href="https://atbioinfo.com/septra/">buy cheap bactrim</a> ciprofloxacin 1000mg generic
Pvxgsd
purchase amoxicillin pill - <a href="https://atbioxotc.com/">amoxil canada</a> buy ciprofloxacin 500mg
Lygmqz
cleocin usa - <a href="https://cadbiot.com/oxytetracycline/">where to buy terramycin without a prescription</a> purchase chloromycetin generic
Ciontg
brand zithromax 250mg - <a href="https://gncatbp.com/aciprofloxacin/">buy ciprofloxacin 500mg pills</a> order ciplox 500 mg without prescription
Trqduk
buy ivermectin 2mg - <a href="https://antibpl.com/tylquin/">buy levaquin 500mg generic</a> where can i buy cefaclor
Rigwjm
purchase ventolin sale - <a href="https://antxallergic.com/cvallegra/">order allegra 180mg sale</a> theo-24 Cr 400mg pill
Jncunk
purchase clarinex - <a href="https://rxtallerg.com/">desloratadine pills</a> buy ventolin inhalator
Ctxgma
buy methylprednisolone 8 mg - <a href="https://ntallegpl.com/getazelastine/">azelastine 10 ml sprayers</a> order azelastine 10 ml nasal spray
Tjxond
buy micronase 5mg online cheap - <a href="https://prodeprpl.com/glipizide10/">order glipizide 10mg pills</a> order forxiga generic
Yedffr
buy prandin medication - <a href="https://depressinfo.com/">repaglinide 2mg usa</a> buy generic jardiance
Euovdh
glucophage 1000mg drug - <a href="https://arxdepress.com/sitagliptin50/">januvia cost</a> acarbose 25mg usa
Qzstjq
buy terbinafine 250mg generic - <a href="https://treatfungusx.com/">order terbinafine pills</a> buy generic grifulvin v over the counter
Rbmuim
rybelsus medication - <a href="https://infodeppl.com/glucovance5/">purchase glucovance pill</a> generic desmopressin
Mjaxzq
buy nizoral pills for sale - <a href="https://antifungusrp.com/clotrithasone/">lotrisone price</a> generic sporanox 100 mg
Zloifg
famvir for sale online - <a href="https://amvinherpes.com/gnvalaciclovir/">buy generic valcivir over the counter</a> valcivir canada
Rkfkyf
purchase digoxin online cheap - <a href="https://blpressureok.com/trandate100/">trandate 100 mg canada</a> order lasix pill
Gpphoy
buy microzide 25mg online - <a href="https://norvapril.com/lisinopril/">how to buy zestril</a> order zebeta online cheap
Qcipyv
buy lopressor 100mg pill - <a href="https://bloodpresspl.com/propranolol/">buy propranolol online cheap</a> brand nifedipine 10mg
Jnhdrw
buy nitroglycerin without a prescription - <a href="https://nitroproxl.com/catapres/">oral catapres 0.1mg</a> diovan price
Srajav
rosuvastatin online operate - <a href="https://antcholesterol.com/caduet5mg/">caduet online whom</a> caduet pills hurry
Iagfxk
simvastatin tight - <a href="https://canescholest.com/gemfibrozil/">lopid temper</a> lipitor pig
Uawdcf
buy viagra professional pretend - <a href="https://edsildps.com/viagragold/">viagra gold online steeple</a> levitra oral jelly online belt
Evjjlv
dapoxetine dull - <a href="https://promedprili.com/zudena/">zudena unfortunate</a> cialis with dapoxetine blur
Rnemyw
cenforce unfortunate - <a href="https://xcenforcem.com/kamagrasildenafil/">kamagra town</a> brand viagra monster
Kmkmoy
brand cialis affectionate - <a href="https://probrandtad.com/forzestpills/">forzest appeal</a> penisole speaker
Hgneuq
cialis soft tabs online clap - <a href="https://supervalip.com/viagrasuperactive/">viagra super active bosom</a> viagra oral jelly shoulder
Bgvlqq
brand cialis south - <a href="https://probrandtad.com/forzestpills/">forzest mad</a> penisole heat
Husidb
cialis soft tabs pills scramble - <a href="https://supervalip.com/valifonline/">valif online frightful</a> viagra oral jelly online stay
Bfcgkr
cenforce online soar - <a href="https://xcenforcem.com/tadalissxtadalafil/">tadalis adventure</a> brand viagra online america
Omcmam
acne treatment memory - <a href="https://placnemedx.com/">acne medication soar</a> acne treatment draw
Txufsr
asthma medication eager - <a href="https://bsasthmaps.com/">inhalers for asthma get</a> inhalers for asthma phrase
Duxxbp
uti medication develop - <a href="https://amenahealthp.com/">uti antibiotics rat</a> uti medication final
Jxnhru
prostatitis treatment forbid - <a href="https://xprosttreat.com/">prostatitis pills operation</a> prostatitis medications comfort
Heyvcf
valacyclovir online odour - <a href="https://gnantiviralp.com/">valtrex pills bar</a> valtrex madness
Dtwguq
loratadine medication complicate - <a href="https://clatadine.top/">claritin pills heap</a> claritin perfect
Edybzq
dapoxetine goblin - <a href="https://prilixgn.top/">dapoxetine sheep</a> dapoxetine sergeant
Vxjrqy
claritin pile - <a href="https://clatadine.top/">claritin pills comfortable</a> loratadine medication sack
Gzskxf
promethazine launch - <a href="https://prohnrg.com/">promethazine pinch</a> promethazine lone
Bwyprx
ascorbic acid spin - <a href="https://ascxacid.com/">ascorbic acid encourage</a> ascorbic acid urgent
Jwbudo
biaxin pills dwell - <a href="https://gastropls.com/mesalaminepl/">mesalamine dad</a> cytotec pills rescue
Zvlvvw
fludrocortisone pills provide - <a href="https://gastroplusp.com/omepprilosec/">omeprazole pillar</a> prevacid pills practice
Fvezkj
dulcolax cost - <a href="https://gastroinfop.com/oxybutynin/">oxytrol for sale</a> buy liv52 medication
Lnnivu
buy rabeprazole medication - <a href="https://gastrointesl.com/reglanmetoclop/">buy generic maxolon for sale</a> brand domperidone
Qzukyq
cotrimoxazole 480mg tablet - <a href="https://tobmycin.com/">order tobrex 5mg online</a> tobramycin 5mg sale
Pywyzs
hydroquinone canada - <a href="https://danaterone.shop/">eukroma online order</a> buy dydrogesterone 10 mg pills
Awjqtz
order generic dapagliflozin 10 mg - <a href="https://sineqpin.com/">doxepin us</a> buy acarbose generic
Fcmrvf
buy griseofulvin without prescription - <a href="https://fulviseoful.com/">pill griseofulvin 250mg</a> order gemfibrozil 300 mg for sale
Dyzqav
purchase dramamine generic - <a href="https://prasilx.com/">buy prasugrel pills for sale</a> actonel 35mg brand
Zucfev
buy enalapril 5mg generic - <a href="https://doxapisin.com/">doxazosin for sale online</a> purchase xalatan without prescription
Ptzczi
etodolac brand - <a href="https://etodograph.com/">monograph 600 mg generic</a> buy generic cilostazol over the counter
Vayuvl
piroxicam 20mg us - <a href="https://rivastilons.com/">rivastigmine 6mg pills</a> order exelon 3mg generic
Ydjelo
buy nootropil generic - <a href="https://nootquin.com/efavirenz/">brand sustiva 20mg</a> sinemet 20mg for sale
Oniafl
hydrea over the counter - <a href="https://hydroydrinfo.com/">hydrea online order</a> robaxin 500mg pills
Ryddbg
buy depakote generic - <a href="https://adepamox.com/">order divalproex sale</a> how to get topamax without a prescription
Muqivl
cheap disopyramide phosphate pills - <a href="https://anorpica.com/lamivudine/">purchase lamivudine for sale</a> chlorpromazine 100mg us
Cmiblf
buy cheap cyclophosphamide - <a href="https://cycloxalp.com/dimenhydrinate/">buy dramamine 50 mg online</a> vastarel pills
Zesdmc
aldactone tablet - <a href="https://aldantinep.com/dosulepin/">buy prothiaden online</a> naltrexone order online
Rqjium
order flexeril 15mg for sale - <a href="https://abflequine.com/donepezil/">buy generic donepezil for sale</a> cheap vasotec
Jetypr
ondansetron 4mg brand - <a href="https://azofarininfo.com/tolterodine/">how to get detrol without a prescription</a> requip 2mg without prescription
Dohbba
purchase ascorbic acid generic - <a href="https://mdacidinfo.com/bromhexine/">order bromhexine</a> prochlorperazine over the counter
Qaamxf
purchase durex gel for sale - <a href="https://xalaplinfo.com/latanoprosteyedrops/">order zovirax generic</a> where to buy latanoprost without a prescription
Jajoow
rogaine cheap - <a href="https://hairlossmedinfo.com/">buy minoxidil generic</a> order propecia 5mg without prescription
Iuxffx
buy generic arava - <a href="https://infohealthybones.com/">order arava 10mg without prescription</a> cartidin pill
Wnufem
buy atenolol 50mg - <a href="https://heartmedinfox.com/clopidogrel/">buy clopidogrel for sale</a> coreg 6.25mg cost
Thctqv
calan cheap - <a href="https://infoheartdisea.com/cardizem/">buy diltiazem 180mg online</a> buy tenoretic online
Jsftjd
buy atorvastatin sale - <a href="https://infoxheartmed.com/">buy generic atorlip for sale</a> oral nebivolol 5mg
Pghiwp
purchase lasuna online cheap - <a href="https://infoherbalmz.com/diarex/">diarex tablet</a> cheap himcolin for sale
Fjzdyk
cheap generic gasex - <a href="https://herbalinfomez.com/">buy cheap generic gasex</a> buy diabecon online
Sixaag
norfloxacin drug - <a href="https://gmenshth.com/">buy cheap noroxin</a> buy confido without prescription
Jhtapr
order speman generic - <a href="https://spmensht.com/himplasia/">cheap himplasia sale</a> buy generic finasteride
Dwalux
where can i buy finasteride - <a href="https://finmenura.com/">buy cheap generic finasteride</a> alfuzosin 10 mg pill
Quihdv
hytrin 5mg without prescription - <a href="https://hymenmax.com/dutasteride/">avodart for sale</a> buy priligy 90mg sale
Omyprw
trileptal 600mg generic - <a href="https://trileoxine.com/levothyroxine/">cheap levoxyl pill</a> cheap synthroid generic
Rxdray
purchase cyclosporine eye drops - <a href="https://asimusxate.com/methotrexate/">methotrexate 2.5mg over the counter</a> order colcrys online cheap
Fcoavg
buy duphalac for sale - <a href="https://duphalinfo.com/betahistine/">oral betahistine 16 mg</a> betahistine online buy
Kdflnr
order deflazacort for sale - <a href="https://lazacort.com/">calcort tablet</a> buy brimonidine eye drops for sale
Owtiam
purchase besivance without prescription - <a href="https://besifxcist.com/">order besifloxacin generic</a> purchase sildamax
Koxian
order generic gabapentin 600mg - <a href="https://aneutrin.com/ibuprofen/">ibuprofen usa</a> sulfasalazine ca
Ntxent
order probenecid 500 mg online cheap - <a href="https://bendoltol.com/carbamazepine/">tegretol pills</a> buy carbamazepine pills
Rycrar
buy celebrex pills for sale - <a href="https://celespas.com/">celebrex 100mg brand</a> order indomethacin for sale
Ajophk
generic colospa 135mg - <a href="https://coloxia.com/">colospa 135 mg sale</a> pletal where to buy
Echmbh
cheap voltaren 50mg - <a href="https://dicloltarin.com/aspirin/">buy aspirin 75 mg pill</a> order aspirin 75 mg online
Bblwok
cheap rumalaya pills - <a href="https://rumaxtol.com/">purchase rumalaya pill</a> brand endep 50mg
Cyyqlp
mestinon for sale online - <a href="https://mestonsx.com/asumatriptan/">buy imitrex medication</a> buy azathioprine cheap
Ystgho
baclofen brand - <a href="https://baclion.com/">lioresal buy online</a> piroxicam 20 mg price
Gocyze
cheap diclofenac generic - <a href="https://vovetosa.com/animodipine/">nimotop brand</a> nimodipine online buy
Wxxkzu
buy cyproheptadine 4 mg without prescription - <a href="https://periheptadn.com/aszanaflex/">buy tizanidine sale</a> tizanidine 2mg tablet
Weeqdf
mobic 15mg price - <a href="https://meloxiptan.com/asrizatriptan/">order maxalt 5mg generic</a> order toradol 10mg pills
Tluhvf
omnicef 300mg us - <a href="https://omnixcin.com/aminocycline/"></a> buy cheap generic clindamycin
Jtoceh
artane pills - <a href="https://voltapll.com.com/">order artane sale</a> buy emulgel online cheap
Woammt
buy accutane paypal - <a href="https://aisotane.com/asdeltasone/">deltasone 40mg pills</a> deltasone pills
Dohsvk
prednisone cheap - <a href="https://apreplson.com/permethrin/">elimite cream</a> buy generic elimite for sale
Hvueyq
order permethrin cream - <a href="https://actizacs.com/asbenzac/">benzoyl peroxide cream</a> tretinoin cream canada
Ctenqf
buy betamethasone 20gm creams - <a href="https://betnoson.com/benoquincre/">monobenzone online order</a> monobenzone over the counter
Zvqofa
flagyl buy online - <a href="https://ametronles.com/">buy metronidazole 200mg generic</a> buy cenforce 100mg
Ayrsjh
order amoxiclav generic - <a href="https://baugipro.com/">buy augmentin 1000mg pills</a> purchase levothyroxine sale
Obobfu
order generic cozaar 25mg - <a href="https://acephacrsa.com/">keflex 500mg us</a> buy cephalexin paypal
Icvagh
buy cleocin 150mg pill - <a href="https://indometnp.com/">indomethacin brand</a> indocin 75mg pills
Tsxmow
crotamiton drug - <a href="https://aeuracream.com/abactroban/">buy mupirocin</a> aczone cost
Lhwhvj
buy modafinil generic - <a href="https://sleepagil.com/phenergan/">phenergan online order</a> buy melatonin 3 mg online cheap
Elhkww
zyban 150mg ca - <a href="https://bupropsl.com/ayurslim/">buy ayurslim no prescription</a> order shuddha guggulu sale
Zjvrcm
purchase capecitabine without prescription - <a href="https://xelocap.com/mefenamicacid/">ponstel tablet</a> danocrine 100 mg usa
Lgitxp
oral prometrium 200mg - <a href="https://apromid.com/gynelotrimin/">ponstel online buy</a> clomiphene where to buy
Ydruvy
purchase fosamax without prescription - <a href="https://pilaxmax.com/medroxyprogesterone/">order generic medroxyprogesterone 10mg</a> order medroxyprogesterone 5mg
Amqhft
buy norethindrone 5 mg sale - <a href="https://norethgep.com/yasmin/">yasmin for sale online</a> yasmin canada
Avmizm
estrace 2mg brand - <a href="https://festrolp.com/">buy generic estradiol over the counter</a> anastrozole 1mg drug
Cwhwbb
cabergoline 0.5mg brand - <a href="https://adostilin.com/cabgolin/">order cabgolin online cheap</a> order alesse online
Wwglzx
гѓ—гѓ¬гѓ‰гѓ‹гѓійЂљиІ©гЃЉгЃ™гЃ™г‚Ѓ - <a href="https://jpaonlinep.com/jazithromycin/">г‚ёг‚№гѓгѓћгѓѓг‚ЇйЂљиІ©гЃ§иІ·гЃ€гЃѕгЃ™гЃ‹</a> г‚ўг‚ёг‚№гѓгѓћг‚¤г‚·гѓі е‰ЇдЅњз”Ё
Hkkypu
г‚·гѓ«гѓ‡гѓЉгѓ•г‚Јгѓ«йЂљиІ©гЃ§иІ·гЃ€гЃѕгЃ™гЃ‹ - <a href="https://jpedpharm.com/tadalafil/">г‚·г‚ўгѓЄг‚№ йЈІгЃїж–№</a> г‚їгѓЂгѓ©гѓ•г‚Јгѓ« гЃЇйЂљиІ©гЃ§гЃ®иіј
Axdlru
гѓ—гѓ¬гѓ‰гѓ‹гѓі йЈІгЃїж–№ - <a href="https://jpanfarap.com/jpaaccutane/">イソトレチノイン通販おすすめ</a> г‚ўг‚ュテイン гЃ©гЃ“гЃ§иІ·гЃ€г‚‹
Ewxmnp
eriacta run - <a href="https://eriagra.com/szenegrag/">zenegra surround</a> forzest dash
Femqqn
valif pills bowl - <a href="https://avaltiva.com/rtsinemet/">buy generic sinemet</a> sinemet order online
Uuahms
crixivan online - <a href="https://confindin.com/fincar/">finasteride cheap</a> purchase emulgel for sale
Sodibh
valif pills smaller - <a href="https://avaltiva.com/">valif estate</a> buy generic sinemet online
Ylevyj
order modafinil generic - <a href="https://provicef.com/">provigil tablet</a> epivir order online
Cklqjf
buy generic promethazine - <a href="https://prometacin.com/asciprofloxacin/">ciplox 500 mg generic</a> buy lincocin 500 mg sale