从零开始学前端：字体图标的引入 --- 今天你学习了吗？（Day18）
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day18）
复习：从零开始学前端：定位 — 今天你学习了吗？（Day17）
文章目录
- 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day18）
前言
补作业补作业补作业~
第十八节课：字体图标的引入
一、阿里字体图标的引入
我们在小米官网页面所看到的小图标，都是利用字体图标做的，icon图标注意是字体而不是图片，接下来就教大家怎么使用icon图标
首先下载字体图标
https://icomoon.io/ 【外国网站】
https://www.iconfont.cn/ 【阿里巴巴矢量图标】
首先先打开网站然后选择字体图标，下载压缩包，下完压缩包之后，解压，将font文件复制到项目根目录，然后引入style.css部分代码就可以了，点击demo.html（可查询阿里巴巴矢量图标使用教程，文字教程在第二条使用中有阐述）
将图标里面的那个符号复制进去
实例：
结果：
代码：
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：
<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('//at.alicdn.com/t/font_3197714_w5ur45divc.woff2') format('woff2'), url('//at.alicdn.com/t/font_3197714_w5ur45divc.woff') format('woff'), url('//at.alicdn.com/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代码：
<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格式，直接网上搜即可，
这里提供一个：https://www.bitbug.net/
使用：
在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：
<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> <!-- 
--> <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> <!-- 
--> <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> <!-- 
--> <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> <!-- 
--> <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> <!-- 
--> <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> <!-- 
--> <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> <!-- 
--> <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> <!-- 
--> <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布局） — 今天你学习了吗？（Day19）
------灵感不过是“顽强的劳动而获得的奖赏。”