在網(wǎng)頁(yè)中使用 icon 字體圖標(biāo) | 前端開(kāi)發(fā)
時(shí)間：2023-06-24 14:57:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-06-24 14:57:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
在網(wǎng)頁(yè)中使用 icon 字體圖標(biāo) | 前端開(kāi)發(fā)：本文首發(fā)于我的個(gè)人號(hào)「效率工具指南」
最近在 B 站上看 Pink 老師的前端視頻，簡(jiǎn)單總結(jié)一下在網(wǎng)頁(yè)中使用 icon 圖標(biāo)的兩種方法。
直接插入字體圖標(biāo)
這里說(shuō)的字體圖標(biāo)，是指既有普通 icon 圖標(biāo)的外觀，又帶有字體特征的圖標(biāo)，可以像調(diào)整字體那樣、調(diào)整圖標(biāo)的大小和顏色，且圖標(biāo)放大之后不會(huì)失真變模糊。
我們一般是從網(wǎng)上下載字體圖標(biāo)的，譬如國(guó)內(nèi)的阿里巴巴旗下的矢量素材網(wǎng)站
iconfont、國(guó)外的
IcoMoon 等。
去年寫(xiě)過(guò)一篇文章《微信小程序開(kāi)發(fā) | 如何在小程序中使用自定義 icon 圖標(biāo)》，其中介紹了 iconfont 圖標(biāo)的使用，這回介紹一下使用來(lái)自 IcoMoon 的圖標(biāo)的方法。
打開(kāi) IcoMoon 圖標(biāo)官網(wǎng)，從中挑選你想使用的 icon 圖標(biāo)，底部的 Selection 會(huì)統(tǒng)計(jì)你選中的圖標(biāo)數(shù)量，選好圖標(biāo)之后，點(diǎn)擊右下角的
Generate Font，生成字體圖標(biāo)。
在打開(kāi)的頁(yè)面，會(huì)顯示我們剛才挑選的所有 icon 圖標(biāo)，并且提供圖標(biāo)的 unicode 編碼，這些編碼等下要用到，但現(xiàn)在先不管。點(diǎn)擊右下角的
Download，下載生成的字體圖標(biāo)文件。
IcoMoon 圖標(biāo)下載：
https://icomoon.io/app/#/select 解壓下載的壓縮文件，其中包含下面這些文件，我們需要用到其中的 fonts 文件夾。
fonts 文件中包含了 4 個(gè)字體文件，這是因?yàn)椴煌瑸g覽器所支持的字體格式是不一樣的，考慮到兼容性，fonts 文件夾就包含了主流瀏覽器支持的字體文件：
- TrueType 字體(.ttf)：是 Windows 和 Mac 最常見(jiàn)的字體
- Web Open Font Format 字體(.woff)：支持的瀏覽器有 IE 9+、Firefox 3.5+、Chrome 6+、Safari 3.6+、Opera 11.1+
- Embedded Open Type 字體(.eot)：是 IE 專(zhuān)用的字體，支持的瀏覽器有 IE 4+
- SVG 字體(.svg)：是基于 SVG 字體渲染的一種格式，支持的瀏覽器有 Chrome 4+、Safari 3.1+、Opera 10.0+、iOS Mobile Safari 3.2+
將 fonts 文件夾復(fù)制到網(wǎng)頁(yè)的項(xiàng)目文件夾 中，譬如放在與
index.html 文件同級(jí)的路徑下。
打開(kāi) HTML 文件，在
style 標(biāo)簽中粘貼下方的代碼，定義我們等下需要用到的字體 icomoon。需要注意的是，如果 fonts 文件與 html 文件在同個(gè)路徑下，就不需要修改下方代碼中的 url 地址。
<style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?bawtoo'); src: url('fonts/icomoon.eot?bawtoo#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bawtoo') format('truetype'), url('fonts/icomoon.woff?bawtoo') format('woff'), url('fonts/icomoon.svg?bawtoo#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }</style>粘貼代碼之后，先來(lái)看一下我們最終想要實(shí)現(xiàn)的效果，如下圖，下方的紅色愛(ài)心??圖標(biāo)，就是前面說(shuō)到的字體圖標(biāo)。根據(jù)最終想要實(shí)現(xiàn)的效果，我們要去到 html 文件中書(shū)寫(xiě)相應(yīng)的代碼。
在 html 文件的
body 標(biāo)簽中輸入下方的一行代碼，中間的
span 標(biāo)簽包含的
方塊，其實(shí)就是愛(ài)心圖標(biāo)，只不過(guò)它無(wú)法在 html 文件中正常顯示。
<p>我 <span>?</span> 你</p>這個(gè)方塊也不是隨意輸入的，還得從我們前面下載的壓縮文件夾中的
demo.html 查看。
在瀏覽器中打開(kāi)
demo.html ，移動(dòng)到愛(ài)心圖標(biāo)右下角的區(qū)域，框選有時(shí)看得到、有時(shí)看不到的
方塊字符，復(fù)制到剪貼板，接著粘貼到 html 文件中。
將方塊字符粘貼到 html 中，如果此時(shí)在瀏覽器中預(yù)覽網(wǎng)頁(yè)效果的話，還是無(wú)法看到剛添加的字體圖標(biāo)的，因?yàn)檫€缺少對(duì)字體圖標(biāo)設(shè)置 CSS 樣式——
聲明字體圖標(biāo)所使用的字體。
html：
<p> 我<span>?</span>你</p>css：
p span { font-family: 'icomoon';}此時(shí)在瀏覽器中重新打開(kāi) html 文件，我們所使用的字體圖標(biāo)就會(huì)正常顯示了。
如果你還想調(diào)整字體圖標(biāo)的
大小和
顏色，可以在 CSS 中增加另外兩個(gè)屬性：
font-size 和
color。
css：
p span { font-family: 'icomoon'; font-size: 50px; color: red;}一番設(shè)置之后，重新在瀏覽器中刷新頁(yè)面，就可以看到最終的效果啦。
通過(guò)偽類(lèi)選擇器使用字體圖標(biāo)
前面介紹的第一種方法，需要同時(shí)在 body 標(biāo)簽(html) 和 style 標(biāo)簽(css) 中同時(shí)書(shū)寫(xiě)相關(guān)的代碼，如果我們想讓 html 文件的結(jié)構(gòu)更加簡(jiǎn)單，我們可以通過(guò)第二種方法——在 style 標(biāo)簽(css) 中通過(guò)
偽類(lèi)選擇器使用字體圖標(biāo)，這樣就只需要在 style 標(biāo)簽或 css 文件中書(shū)寫(xiě)相關(guān)的代碼。
先來(lái)看一下我們最終想要實(shí)現(xiàn)的效果，如下圖所示，給輸入框的右側(cè)添加一個(gè)
向下的小三角 圖標(biāo)。
想制作這個(gè)效果，同樣是先從前面介紹的 IcoMoon 網(wǎng)站下載字體圖標(biāo)，將解壓后的文件中的 fonts 文件夾放到與
index.html 同級(jí)的路徑下，接著在 html 的
style 標(biāo)簽中粘貼下方的代碼：
<style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?bawtoo'); src: url('fonts/icomoon.eot?bawtoo#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bawtoo') format('truetype'), url('fonts/icomoon.woff?bawtoo') format('woff'), url('fonts/icomoon.svg?bawtoo#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }</style>在 html 的
body 標(biāo)簽中插入一個(gè)空白的盒子 div 標(biāo)簽：
<body> <div></div></body>接著在 style 標(biāo)簽中，給 div 盒子設(shè)置寬度、高度，并給它設(shè)置一個(gè)粗細(xì)為 1 px 的灰色邊框：
<style> div { width: 200px; height: 40px; border: 1px solid gray;}</style>此時(shí)在瀏覽器中打開(kāi) html 文件，就可以看到下圖所示的孤零零的輸入框。
接著繼續(xù)給這個(gè)輸入框「添磚加瓦」——添加一個(gè)向下的小三角 ，繼續(xù)在 style 標(biāo)簽中書(shū)寫(xiě)代碼：
div::after { content: '?'; font-family: 'icomoon';}稍微解釋一下這個(gè)代碼，在 div 后面加上
兩個(gè)英文中的冒號(hào)，并且跟上單詞
after 或者 before，就是所謂的
偽類(lèi)選擇器，在我目前的認(rèn)知范圍內(nèi)，
偽類(lèi)選擇器就是用 css 代碼來(lái)給 html 頁(yè)面添加額外的元素，我們也確實(shí)可以在網(wǎng)頁(yè)中看到添加的小三角，如下圖。但這段代碼是寫(xiě)在 css 而非 html 文件中，一定程度上可以簡(jiǎn)化 html 文件的代碼。
到這里，我們就順利地在 html 頁(yè)面中添加了字體圖標(biāo)，值得一提的是，偽類(lèi)選擇器中
content 屬性的值，除了可以是字體圖標(biāo)對(duì)應(yīng)的
方塊字符，還可以是
字體圖標(biāo)下方的編號(hào)。
以下圖為例，愛(ài)心圖標(biāo)的編號(hào)是 e9da，因此 content 屬性的值也可以是
/e9da ，通過(guò)編號(hào)來(lái)調(diào)用字體圖標(biāo)的時(shí)候，需要在編號(hào)的最前面加多一個(gè)反斜桿 / 。
div::after { content: '/e9da'; font-family: 'icomoon';}引入字體圖標(biāo)之后，字體圖標(biāo)默認(rèn)位于輸入框的左上角，為了將字體圖標(biāo)移動(dòng)到右側(cè)居中的位置，這里還需要用到另外的知識(shí)——
定位，包含
相對(duì)定位和
絕對(duì)定位。
關(guān)于定位的知識(shí)，這里暫時(shí)就不過(guò)多展開(kāi)了，可以記住一個(gè)口訣「
子絕父相」，即子元素設(shè)置絕對(duì)定位，父元素設(shè)置相對(duì)定位，就可以達(dá)到
自由移動(dòng)下拉小三角位置的目的。
分別給 div 和偽元素選擇器 div::after 添加另外的樣式：
div { position: relative;}div::after { position: absolute; top: 12px; right: 10px;}這里的 top 和 right 屬性的值，并不是唯一的，需要根據(jù)實(shí)際情況，配合瀏覽器的開(kāi)發(fā)者工具進(jìn)行調(diào)整，最終得到看起來(lái)比較舒適的值（主要就是調(diào)整到小三角可以位于輸入框水平居中的位置），最終效果如下。
以上，就是本次想和你分享的內(nèi)容。
希望對(duì)有需要的朋友有幫助。
在線咨詢(xún)
