从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
复习：从零开始学前端：定位 — 今天你学习了吗？（CSS：Day17）
文章目录
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第十八节课：字体图标的引入一、阿里字体图标的引入二、阿里字体图标的使用(免费)三、外国网站的字体引用(Some need little money)四、ico网站logo的设置五、练习前言
补作业补作业补作业~
第十八节课：字体图标的引入
一、阿里字体图标的引入
我们在小米官网页面所看到的小图标，都是利用字体图标做的，icon图标注意是字体而不是图片，接下来就教大家怎么使用icon图标
首先下载字体图标
https://icomoon.io/ 【外国网站】
/ 【阿里巴巴矢量图标】
首先先打开网站然后选择字体图标，下载压缩包，下完压缩包之后，解压，将font文件复制到项目根目录，然后引入style.css部分代码就可以了，点击demo.html（可查询阿里巴巴矢量图标使用教程，文字教程在第二条使用中有阐述）
将图标里面的那个符号复制进去
实例：
结果：
代码：
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.0"><title>字体图标</title><link rel="stylesheet" href="./font/iconfont.css"><style>.one{color: pink;font-size: 24px;}</style></head><body><div class="iconfont one"></div></body></html>
iconfont.css:
@font-face {font-family: "iconfont"; /* Project id 3197714 */src: url('iconfont.woff2?t=1645514430760') format('woff2'),url('iconfont.woff?t=1645514430760') format('woff'),url('iconfont.ttf?t=1645514430760') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-gouwuchekong:before {content: "\e600";}.icon-sousuo:before {content: "\e752";}.icon-xinxihuihuaxiaoxi:before {content: "\e625";}.icon-contact:before {content: "\e60b";}
类的权重大于标签的权重，所以在自建的html中修改样式的时候直接使用div是无法修改样式的，之前课程有讲过权重。
二、阿里字体图标的使用(免费)
阿里图标的使用
打开网站，点击你所需要的字体图标，加入购物车把加入购物车的字体图标添加到自己的项目文件夹里面然后下载到本地，然后解压，吧解压之后的全部文件复制到你的html项目中在你需要的html文件中引入icofont.css在body里面写你需要用的字体图标的unicode码最后就是要把用unicode码的标签给它一个icofont类型引用，才算完成
当你下载完项目后，你有需要其他的图标应该这么做
1.继续去加购（需要的字体图标放入购物车），然后添加到之前的额项目文件夹里面
2.点击查看在线链接，把刷新出来的链接全部复制。
3.打开本地字体文件夹里面的iconfont.css文件，把你复制的代码，替换掉@font-face对象即可
实例：
代码：
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.0"><title>字体图标</title><link rel="stylesheet" href="./font/iconfont.css"><style>.one{color: teal;font-size: 50px;}</style></head><body><div class="iconfont one"></div></body></html>
iconfont.css:
@font-face {font-family: 'iconfont'; /* project id 3197714 */src: url('');src: url('?#iefix') format('embedded-opentype'),url('///t/font_3197714_w5ur45divc.woff2') format('woff2'),url('///t/font_3197714_w5ur45divc.woff') format('woff'),url('///t/font_3197714_w5ur45divc.ttf') format('truetype'),url('#iconfont') format('svg');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-gouwuchekong:before {content: "\e600";}.icon-sousuo:before {content: "\e752";}.icon-xinxihuihuaxiaoxi:before {content: "\e625";}.icon-contact:before {content: "\e60b";}
三、外国网站的字体引用(Some need little money)
操作：
1.打开外国网站：https://icomoon.io/
2.点击右上角iconmoon app
3.在selection中选择自己需要的字体
4. 点击generate font，然后点击下载，
5. 引用时引用数字后面的看不懂的图标
其余操作与阿里的一样，
在引用时，可以使用标签，但是需要加上font-family: 'icomoon';这句话。
实例：
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.0"><title>outfont</title><link rel="stylesheet" href="./outfont/style.css"><style>div{font-family: 'icomoon';color: pink;font-size: 25px;}</style></head><body><div></div></body></html>
四、ico网站logo的设置
wangzhanlogo有统一的格式.ico，但是普通图片也可以使用。
将普通图片换为ico格式，直接网上搜即可，
这里提供一个：/
使用：
在html头文件中引入即可
语法：
<link rel="shortcut icon" href="./kang_favicon.ico">
实例：
代码：
<!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.0"><title>网站logo</title><link rel="shortcut icon" href="./../../img素材/kang_favicon.ico"><style>.box{width: 200px;height: 200px;background-color: teal;opacity: 0;}.box:hover{opacity: 1;}</style></head><body><div class="box"></div></body></html>
五、练习
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.0"><title>OPPO商城列表</title><style>body {background-color: rgb(233, 233, 250);}.contain {width: 1248px;height: 300px;/* background-color: skyblue; */margin: 100px auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;}.contain a {width: 300px;height: 130px;background-color: white;/* 默认收缩 */flex-shrink: 0;display: flex;color: black;text-decoration: none;border-radius: 5px;overflow: hidden;}/* 图片 *//* .contain a img {width: 130px;height: 130px;} *//* 背景 */.contain a>.img1 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/1.webp);background-size: contain;}.contain a>.img2 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/2.webp);background-size: contain;}.contain a>.img3 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/3.webp);background-size: contain;}.contain a>.img4 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/4.webp);background-size: contain;}.contain a>.img5 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/5.webp);background-size: contain;}.contain a>.img6 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/6.webp);background-size: contain;}.contain a>.img7 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/7.webp);background-size: contain;}.contain a>.img8 {width: 130px;height: 130px;background: url(../../oppo商城素材/商品展示/8.webp);background-size: contain;}.contain a .txt {width: 170px;height: 130px;padding: 20px 20px 0 0;box-sizing: border-box;}.contain a .txt .txt1 {font-size: 17px;}.contain a .txt .txt2 {font-size: 14px;opacity: .5;line-height: 29px;}.contain a .txt .txt3 {font-size: 22px;color: #f44336;margin-top: 10px;}</style></head><body><div class="contain"><a href=""><div class="img img1"></div><!-- <img src="../../oppo商城素材/商品展示/1.webp" alt=""> --><div class="txt"><div class="txt1" title="Find X5 Pro">Find X5 Pro</div><div class="txt2" title="赠298尊享礼盒">赠298尊享礼盒</div><div class="txt3">￥6299</div></div></a><a href=""><div class="img img2"></div><!-- <img src="../../oppo商城素材/商品展示/2.webp" alt=""> --><div class="txt"><div class="txt1" title="Reno7">Reno7</div><div class="txt2" title="至高立减100元">至高立减100元</div><div class="txt3">￥2599</div></div></a><a href=""><div class="img img3"></div><!-- <img src="../../oppo商城素材/商品展示/3.webp" alt=""> --><div class="txt"><div class="txt1" title="Find N">Find N</div><div class="txt2" title="立即预约">立即预约</div><div class="txt3">￥8999</div></div></a><a href=""><div class="img img4"></div><!-- <img src="../../oppo商城素材/商品展示/4.webp" alt=""> --><div class="txt"><div class="txt1" title="一加 10 Pro">一加 10 Pro</div><div class="txt2" title="24期免息">24期免息</div><div class="txt3">￥5799</div></div></a><a href=""><div class="img img5"></div><!-- <img src="../../oppo商城素材/商品展示/5.webp" alt=""> --><div class="txt"><div class="txt1" title="K9 Pro">K9 Pro</div><div class="txt2" title="至高立减300元">至高立减300元</div><div class="txt3">￥1899</div></div></a><a href=""><div class="img img6"></div><!-- <img src="../../oppo商城素材/商品展示/6.webp" alt=""> --><div class="txt"><div class="txt1" title="Find X5">Find X5</div><div class="txt2" title="赠198元尊享礼盒">赠198元尊享礼盒</div><div class="txt3">￥3999</div></div></a><a href=""><div class="img img7"></div><!-- <img src="../../oppo商城素材/商品展示/7.webp" alt=""> --><div class="txt"><div class="txt1" title="K9x">K9x</div><div class="txt2" title="积分可抵50元">积分可抵50元</div><div class="txt3">￥1399</div></div></a><a href=""><div class="img img8"></div><!-- <img src="../../oppo商城素材/商品展示/8.webp" alt=""> --><div class="txt"><div class="txt1" title="K9s">K9s</div><div class="txt2" title="至高立减200元">至高立减200元</div><div class="txt3">￥1699</div></div></a></div></body></html>
预习：从零开始学前端：弹性盒模型（flex布局） — 今天你学习了吗？（CSS：Day19）
------灵感不过是“顽强的劳动而获得的奖赏。”
