整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
大有学问# #头条创作挑战赛#
在html代码中是以文字元素的形式出现，但在网页渲染时却以图片的形式显示的小图标就叫做字体图标。
常见形式：地址、电话、登录窗口的头像等。
字体图标比精灵图更为轻量化，在网页中加载速度更快；
精灵图在实际使用中，图片放大或缩小时图片会失真。
精灵图是一张多个图标整合的一个大图片，后续添加或修改图标不方便。
注：
虽然字体图标好处多多，但是它并不能替代精灵图。
当小图标形式简单且个数较少时适合使用字体图标；
当小图标形式复杂且个数较多时适合使用精灵图。
icomoon网站：https://icomoon.io/。
阿里iconfont字库：https://www.iconfont.cn/。
以icomoon网站为例。
从网站中下载图标压缩包：点击右上角“IcoMoon App”按钮，进入字体图标选择页面。
icomoon网站首页
选中需要的图标（选中状态的图标，背景颜色会变白且出现黄色边框）后，个数可以选择1个，也可以选择多个。选好图标后，点击右下角“Generate Font ”按钮进入下载页面。
字体图标选择页面
点击右下角“download”按钮进行下载。
icomoon网站图标下载页面
解压下载好的压缩包。
字体图标下载文件解压后的文件夹
将解压好的文件夹整体添加到项目文件夹中，我没有单独设置字体文件夹，直接放在素材图片文件夹了。
项目文件夹目录
打开字体图标文件夹中style.css，
复制字体声明到html文件的style样式中，改变url的图标文件存放位置。
span标签中字体样式需要与字体声明中样式保持一致。
字体图标调用
在html文件中，span标签的内容是需要从网站中直接粘贴复制过来使用。在网站下载页面，鼠标点击就是选中状态，直接ctrl+c复制即可。
字体图标的代码样式调用
如此就是完整的字体图标使用过程。另外有阿里iconfont也可以使用，也是免费的。有兴趣可自行了解。
<style>
/* 字体声明 ：从下载字体图标的文件夹中style.css文件上复制过来的*/
@font-face {
font-family: 'icomoon';
src: url('../images/icomoon/fonts/icomoon.eot?49yzcu');
src: url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color: antiquewhite;
}
</style>span标签的内容就是从字体图标上粘贴下来的
代码运行效果图
好了，今天的学习就到这里了，下回学习CSS三角~
喽，大家好。
好久不见啊！！！
2021年的第一篇推文来啦~
有小伙伴在后台留言：浏览网页时如何做标记？
所以这篇推文就来介绍一下~
之前的推文中有介绍过，浏览网页时如何快速定位关键词，其实也算是做标记的一种，即：将关键词高亮显示出来。需要用到的工具我介绍了Ctrl+F以及multi-highlight
没有看过的，看这里：
浏览网页时如何快速定位关键词？
那么，问题来了！！！
如果我不只是想简单地将关键词高亮，而是想标记一句话或者一段内容，甚至注释一些自己的想法，有木有工具可以做到呢？
答案当然是有的呀！
往下看，我逐个介绍这些浏览器插件
小插曲：浏览器插件如何安装？
谷歌浏览器安装方法：
谷歌浏览器插件，绝对不可错过哦
QQ浏览器安装方法：
科研｜这大概是我见过的最强大的浏览器插件
火狐浏览器安装方法：
这里有油猴子脚本大合集
ps：Microsoft edge安装方法也类似
去哪里下载插件？
大神们都在用的Chrome插件下载网站，建议收藏
OK，完成上面步骤，来到今天的正题！
插件一：Highlight it
\推荐指数：⭐⭐⭐⭐
\下载：https://www.http://extfans.com/productivity/gmadbgbjdlmnkjkdcoikmlofefkckbim/
\安装：见上
（ps：安装后如遇不好用的情况，刷新一下网页或关掉浏览器重新进一下）
\使用：
选中网页上的文本后，点击插件图标，点击选取颜色，即可把文本标记出来，仔细观察可以看到插件右下角会显示数字，表明做了几个标记。
而且，再次浏览这一网页时，所做的标记依旧存在！
\优缺点：上手简单；只能高亮，不能注释
插件二：Pagenote
\推荐指数：⭐⭐⭐⭐⭐
\下载：https://www.http://extfans.com/productivity/hpekbddiphlmlfjebppjhemobaopekmp/
\安装：见上
\使用：
高亮：选择网页文本后，会自动弹出铅笔图标，有提示使用快捷键P，快速高亮，也可以点击铅笔图标实现高亮。
鼠标悬停在铅笔图标上，四周会出现A、G、E、N、O、T，表示6种不同高亮颜色。
这个可以自己调节：点击图标，点击setting，在插件设置中可以设置自己喜欢的颜色。
复制文本：第二个单击复制，双击复制并且保存到历史面板
快捷搜索：第三列是快捷搜索，在百度中检索这段文字快捷键是B，谷歌搜索是S，谷歌翻译是T
设置：第四个是设置，和点击图标中的设置一样
批注：标记文本后，鼠标悬停在文本上，可以看到会弹出新的图标，分别表示复制，批注，更改颜色
标签：在右侧可以看到添加标签功能，标签支持搜索
截图保存：小剪刀是截图保存，剪刀左侧的小图标，点击之后可以把高亮改成下划线
网页笔记：设置的网页笔记里会有记录，太赞了
文稿功能：插件里有介绍~我就不啰嗦啦
\优点：界面设计真的绝美！！！功能很齐全了！！！免费免费免费！！！
插件三：Diigo web collector
\推荐指数：⭐⭐⭐
\下载：https://www.http://extfans.com/productivity/pnhplgjpclknigjpccbcnmicgcieojbh/
\安装：同上
\使用：
高亮、批注、标签、截图保存这些功能都有，好奇的宝宝想捣鼓的捣鼓一下
\缺点：全英文，貌似没法改语言，免费版限制笔记条数等，付费版用不起。
（ps：我大概是不会用的，写完这篇推文估计就会删了这个插件。。。那为啥还写呢，因为先发现的这个，后来才发现pagenote，结果就真香了，哈哈哈）
不过，最后插一句，我其实不常用这些功能的，最常用的是高亮关键词帮助我快速定位要搜索的内容，因为在网页版做的标注和标签不太好做知识管理，所以我知识管理还是放在有道云等云笔记中作为统一的收纳口。
但是，难免有时浏览网页需要这些功能，所以就分享一下~
感兴趣可以看一下这个视频
利用云笔记软件，打造第二大脑
本次分享就先到这里吧~
最后上一张思维导图，可以直接保存，哈哈哈~
欢迎来评论呀~
体图标库Font Awesome
http://fontawesome.dashgame.com/
字体图标库Font Awesome
一 字体图标引入方式
1 使用link标签引入
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">2 在CSS文件中引用
@import '//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css';3 以npm插件形式引入
npm install font-awesome@4.7.0 --save二 字体图标的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="../src/shenlan-ui.css">
<title>字体图标</title>
</head>
<body>
<!-- 内容区 -->
</body>
</html>注意：这是一个标准的移动端HTML文件
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<i class="fa fa-address-book"></i>这样, 这个图标就在页面的左上角显示出来了：
三、自定义图标样式
*请认真填写需求信息，我们会在24小时内与您取得联系。
