整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
大有學問# #頭條創作挑戰賽#
在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小時內與您取得聯系。
