百度安全驗(yàn)證

百度安全驗(yàn)證

網(wǎng)絡(luò)不給力，請稍后重試

返回首頁

問題反饋

網(wǎng)絡(luò)上經(jīng)常看見人名或者其他名詞后面跟著“ICON”，請問是什么意思？或者有什么含義？ - 知乎

網(wǎng)絡(luò)上經(jīng)?？匆娙嗣蛘咂渌~后面跟著“ICON”，請問是什么意思？或者有什么含義？ - 知乎首頁知乎知學(xué)堂發(fā)現(xiàn)等你來答?切換模式登錄/注冊名詞網(wǎng)絡(luò)上經(jīng)?？匆娙嗣蛘咂渌~后面跟著“ICON”，請問是什么意思？或者有什么含義？關(guān)注者27被瀏覽10,756關(guān)注問題?寫回答?邀請回答?好問題 5?添加評論?分享?2 個(gè)回答默認(rèn)排序閃人啦?少來這一套...? 關(guān)注你會看到網(wǎng)易新浪里面的文章，某些出名的名人，節(jié)日，品牌，地名，都會有額外標(biāo)注的藍(lán)色字體，點(diǎn)擊進(jìn)去可以看到這個(gè)名稱的搜索，方便用戶理解，然后有些人會直接把文字爬下來，所以復(fù)制粘貼后名字后面就是帶icon，在原文這是可以點(diǎn)擊搜索名字。發(fā)布于 2023-10-25 20:50?贊同 5??1 條評論?分享?收藏?喜歡收起?文藝工作者趣味高雅，愛好文藝，精通各種雕蟲小技。? 關(guān)注貼圖看。發(fā)布于 2023-01-17 00:46?贊同 2??添加評論?分享?收藏?喜歡收起??

icon是什么梗？告訴你為什么很多詞后面出現(xiàn)icon - 錯(cuò)新網(wǎng)

icon是什么梗？告訴你為什么很多詞后面出現(xiàn)icon - 錯(cuò)新網(wǎng)

首頁|

新聞|

科技|

人物|

科學(xué)|

話題|

運(yùn)營|

設(shè)計(jì)|

開發(fā)|

服務(wù)器|

學(xué)院|

產(chǎn)品|

網(wǎng)文|

娛樂|

游戲|

圖片

首頁?>?新聞?>?話題 > 正文

icon是什么梗？告訴你為什么很多詞后面出現(xiàn)icon

2023-09-21 23:57:45

字體：大 中 小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

各種詞后面出現(xiàn)icon，更有人給自己微博賬號后面加icon，比如某個(gè)人的名字、某個(gè)名詞、某個(gè)事件，點(diǎn)擊到這個(gè)文字會跳轉(zhuǎn)到其他頁面。當(dāng)我們復(fù)制這段文字的時(shí)候?qū)嶋H是和這個(gè)鏈接一起復(fù)制過來的，但其他媒體平臺又不認(rèn)可這個(gè)鏈接格式，復(fù)制過去再點(diǎn)擊不會鏈接回原來的網(wǎng)址，這時(shí)就會在該詞的后面出現(xiàn)icon文字 代表他是從某個(gè)平臺復(fù)制過來的帶鏈接的文字。

你要非說自己加個(gè)icon時(shí)偶像崇拜對象的話也行，只要臉皮夠厚。天下文章一大抄，自媒體作者們都是搬來搬去，這些人吧，懶到發(fā)布的時(shí)候都不愿修改一下，所以各種Icon就出現(xiàn)了。這種懶惰的錯(cuò)誤似乎還形成了一種“文化”。是不是沒文化真可怕呢？

上一篇：999元1間醬香大床房貴不貴？可附贈一瓶飛天茅臺

下一篇：《拜托了！前輩》舞蹈超火，這就是宅男的最愛嘛！

發(fā)表評論

共有條評論

用戶名:

密碼:

驗(yàn)證碼:

匿名發(fā)表

學(xué)習(xí)交流

更多

如何解決被谷歌定位惡意網(wǎng)頁的

什么是RIA？

瀏覽器、域名和Cookie大小的關(guān)系

瀏覽器、域名和Cookie大小的關(guān)系...

如何解決Flash擋住層的問題05-09

utf-8編碼文檔和gb2312編碼文檔之間如何進(jìn)05-09

國外空間亂碼問題的解決辦法05-09

什么是域名05-09

什么是虛擬主機(jī)05-09

如何在Flash中調(diào)用外部應(yīng)用程序05-09

詳解301重定向05-09

如何解決被谷歌定位惡意網(wǎng)頁的問題05-09

什么是RIA？05-09

熱門圖片

更多

有美一人，清揚(yáng)婉兮

古風(fēng)漢服，花落人家

蕪湖有個(gè)“松鼠小鎮(zhèn)”

小嶺南：一個(gè)世外桃源的地方

葡萄架下，葡萄熟了

正宗老北京脆皮烤鴨

爺爺都是從孫子走過來的

我太帥了，睡不著咋整啊

猜你喜歡的新聞

《拜托了！前輩》舞蹈超火，這就是宅男的最愛嘛

英語老師3天忘光單詞？甚至包括自己的姓名

既做事，又作詩！360智腦正式開放

每天2小時(shí)！98年小伙開網(wǎng)店月入5萬

樂視網(wǎng)被判賠20.4億 賈躍亭攤上事兒了？

1公斤黃金價(jià)格已達(dá)47萬 依然處于上漲趨勢

icon是什么梗？告訴你為什么很多詞后面出現(xiàn)ic

女生軍訓(xùn)跳舞走光？網(wǎng)傳涉事學(xué)校辟謠：并非本校

原價(jià)56.9元1箱的紙巾誤設(shè)置為了10元6箱 潔

餐廳2萬終身免費(fèi)吃？回應(yīng)：目前還沒有一個(gè)客人

猜你喜歡的關(guān)注

《拜托了！前輩》舞蹈超火，這就是宅男的最愛嘛

icon是什么梗？告訴你為什么很多詞后面出現(xiàn)ic

999元1間醬香大床房貴不貴？可附贈一瓶飛天茅

蜂花幫國貨宣傳 被網(wǎng)友戲稱為“樸實(shí)無華的

潑天的富貴！鴻星爾克多款產(chǎn)品標(biāo)價(jià)79元

醬香拿鐵還沒喝，酒心巧克力要來了！茅臺和德芙

茅臺：不藏了，我和德芙官宣了！酒心巧克力，9月16

存款240萬決定躺平！每個(gè)月有退休金，有自己的

中秋國慶假期火車票開售 12306候補(bǔ)購票功能

余承東發(fā)布會說了5次遙遙領(lǐng)先 引發(fā)現(xiàn)場觀眾

新聞熱點(diǎn)

《拜托了！前輩》舞蹈超火，這就是宅男的最愛嘛！

2023-09-25 00:12:53

英語老師3天忘光單詞？甚至包括自己的姓名

2023-09-22 19:15:24

既做事，又作詩！360智腦正式開放

2023-09-22 19:11:10

每天2小時(shí)！98年小伙開網(wǎng)店月入5萬

2023-09-22 19:04:26

樂視網(wǎng)被判賠20.4億 賈躍亭攤上事兒了？

2023-09-22 19:00:36

1公斤黃金價(jià)格已達(dá)47萬 依然處于上漲趨勢

2023-09-22 18:56:21

疑難解答

MHA常用腳本簡介

sysbench安裝、使用、結(jié)果解讀

CentOS下使用yum方式安裝percona xtra

分布式系統(tǒng)CAP的原理簡介

Session重疊問題學(xué)習(xí) -最優(yōu)化

InnoDB之Dirty Page、Redo log

pt-table-checksum出現(xiàn)的問題

MyCAT高可用方案和架構(gòu)

常用思維導(dǎo)圖工具

Session重疊問題教學(xué)

圖片精選

《拜托了！前輩》舞蹈超火，這就是宅男

icon是什么梗？告訴你為什么很多詞后

999元1間醬香大床房貴不貴？可附贈一

蜂花幫國貨宣傳 被網(wǎng)友戲稱為“樸

網(wǎng)友關(guān)注

瀏覽器、域名和Cookie大小的關(guān)系

互聯(lián)網(wǎng)能給企業(yè)帶來什么

懶人站長如何去做淘寶客

談?wù)勑率衷撊绾巫鳇c(diǎn)擊網(wǎng)賺

如何讓網(wǎng)頁過期，無法回退

如何解決Flash擋住層的問題

建站經(jīng)驗(yàn)：你應(yīng)知道的八不要

個(gè)人網(wǎng)站的常見五大弊病

utf-8編碼文檔和gb2312編碼文檔之間如何進(jìn)行

什么樣的IP流量是健康的

關(guān)于本站 - 網(wǎng)上投稿 - 商務(wù)合作 - 隱私政策 - 網(wǎng)站地圖

Copyright ? 2010 - 2023 CUOXIN.COM. All Rights Reserved.錯(cuò)新網(wǎng) 版權(quán)所有

百度知道 - 信息提示

百度知道 - 信息提示

百度首頁

商城

注冊

登錄

網(wǎng)頁

資訊

視頻

圖片

知道

文庫

貼吧采購

地圖更多

搜索答案

我要提問

百度知道>提示信息

知道寶貝找不到問題了>_

該問題可能已經(jīng)失效。返回首頁

15秒以后自動返回

幫助

?|?意見反饋

?|?投訴舉報(bào)

京ICP證030173號-1???京網(wǎng)文【2023】1034-029號???? ?2024Baidu??使用百度前必讀?|?知道協(xié)議?

引入阿里iconfont圖標(biāo)方法以及注意事項(xiàng) - 知乎

引入阿里iconfont圖標(biāo)方法以及注意事項(xiàng) - 知乎切換模式寫文章登錄/注冊引入阿里iconfont圖標(biāo)方法以及注意事項(xiàng)tuonioooo?計(jì)算機(jī)技術(shù)與軟件專業(yè)技術(shù)資格證持證人背景在我們做日常項(xiàng)目時(shí)，通常會用到icon圖標(biāo)或者是一些圖標(biāo)字體，阿里iconfont是我們選擇的較多的一種，下面我將會介紹使用方法和幾種常用的引用方式iconfont新建項(xiàng)目官網(wǎng)：https://www.iconfont.cn/ 在首頁選擇【圖標(biāo)管理】-【我的項(xiàng)目】點(diǎn)擊 【我的項(xiàng)目】填寫項(xiàng)目信息，即可完成新建一個(gè)項(xiàng)目?！綟ontClass/Symbol 前綴】和【Font Family】參數(shù)是自定義的，以后會與我們生成的代碼相關(guān)聯(lián)，默認(rèn)即可。添加圖標(biāo)新建好項(xiàng)目后，找到自己想要的圖標(biāo)，加入購物車。點(diǎn)擊頁面右上角的購物車圖標(biāo)，打開自己的購物車，選擇添加至項(xiàng)目，我們就可以在自己的項(xiàng)目下看到添加的圖標(biāo)了。在我們的項(xiàng)目下，可以對圖標(biāo)進(jìn)行編輯，如：大小、顏色、填充色，旋轉(zhuǎn)等操作。Vue工程中引入iconfont官方文檔：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code根據(jù)官方文檔，有unicode引用、font-class引用、symbol引用三種引入方式，這三種方式又分有兩種情況：下載到本地引入，在線鏈接引入。在Iconfont網(wǎng)頁我們自己的項(xiàng)目下可以看到這些方式選擇。unicode引用 不推薦本地引入unicode方式代碼量少，并不需要下載本地文件。鏈接引入unicode模式下的在線鏈接指的是font-face代碼。在vue中，將項(xiàng)目生成的font-face代碼和自定義的iconfont樣式寫在App.vue的style中，就可以在項(xiàng)目中引用圖標(biāo)了。此時(shí)樣式是全局作用的，如果想要實(shí)現(xiàn)圖標(biāo)不同的樣式，可以增加一層自定義樣式。在”myIconStyle”樣式中修改color等屬性可以覆蓋全局的樣式，實(shí)現(xiàn)單個(gè)的樣式修改。這里注意理解下，官方文檔說的“不支持多色”，是指我們iconfont網(wǎng)頁項(xiàng)目中，就算有多色圖標(biāo)，引用的時(shí)候會自動去色，統(tǒng)一變成默認(rèn)的顏色，不管你給圖標(biāo)一編輯了紅色圖標(biāo)二編輯了黃色，在項(xiàng)目中用unicode方式引用的時(shí)候都會變成默認(rèn)顏色，但是我們?nèi)匀豢梢酝ㄟ^修改css樣式實(shí)現(xiàn)圖標(biāo)顏色自定義，只是這個(gè)顏色編輯放在代碼層面來了。font-class引用 推薦使用如官方文檔所說，font-class是為了讓程序更加直觀可讀，直接用unicode會造成閱讀困難。font-class模式關(guān)鍵在于生成的css文件。本地引入按照下圖選擇文件放入自己的項(xiàng)目中，vue中建議在assets文件夾下新建一個(gè)iconfont文件夾，放相關(guān)文件。常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2@font-face {

font-family: "iconfont"; /* Project id 2974228 */

src: url('iconfont.woff2?t=1640340931514') format('woff2'),

url('iconfont.woff?t=1640340931514') format('woff'),

url('iconfont.ttf?t=1640340931514') format('truetype');

}再就是引入時(shí)，需要注意的是字體文件路徑引用是否準(zhǔn)確，否則打包可能不識別然后在main.js中引入iconfont.css文件，就可以正常使用了。import './assets/iconfont/iconfont.css'鏈接引入方式一：在index.html頭部中，引入css文件即可方式二：點(diǎn)開css代碼鏈接復(fù)制css代碼，在項(xiàng)目中粘貼到iconfont.css文件中 ，在App.vue或main.js中引入import './assets/iconfont/iconfont.css'注意：iconfont.css中url 官方默認(rèn)是cdn 鏈接, 打包時(shí)請改成http否則不識別@font-face {

font-family: "iconfont"; /* Project id 2974228 */

src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),

url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),

url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');

}打包后@font-face {

font-family: "iconfont"; /* Project id 2400747 */

src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),

url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),

url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');

}symbol引用 不推薦本地引入將下載好的iconfont.js文件放入自己的工程目錄，在main.js中引入，在App.vue中寫好通用css代碼，即可使用。import './assets/iconfont/iconfont.js'這里注意一點(diǎn)，下載下來的js文件是壓縮過的，如果項(xiàng)目使用了eslint語法校驗(yàn)會瘋狂報(bào)錯(cuò)，可以在js文件開頭加入 /* eslint-disable */來指定該文件不應(yīng)用eslint校驗(yàn)。鏈接引入在index.html頭部中，引入js文件即可uni-app 引入iconfont圖標(biāo)基本上引入方式跟上Vue相同，但是會遇到打包時(shí)圖標(biāo)引入不顯示的問題，解決方式如下：1.在iconfont.css中，需要使*~@* 將路徑添加完整@font-face {

font-family: "iconfont"; /* Project id 2642111 */

src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),

url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),

url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');

}2.在App.vue全局引入iconfont.css3.使用圖標(biāo)，在標(biāo)簽內(nèi)的class通過"iconfont icon-"添加下載好的圖標(biāo)即可或通過官方uni-icons 引入自定義圖標(biāo)

總結(jié) symbol引用最受官方推薦，也是最優(yōu)的方式，但是瀏覽器兼容不好，目前來看，前端需要兼容一些低版本的瀏覽器，所以如果考慮到用戶使用，不建議采用symbol引用。 unicode引用瀏覽器兼容最好，但是可讀性差，font-class引用雖然兼容性比unicode引用差一點(diǎn)，但是提高可讀性，綜合來看，目前項(xiàng)目中還是采用font-class引用比較好。 因?yàn)橐镁W(wǎng)絡(luò)資源的不穩(wěn)定，所以建議采用本地引入的方式。 如果在圖標(biāo)庫中新增加了圖標(biāo)，則需要更新在線鏈接并把該鏈接重新引入到實(shí)際項(xiàng)目中，或者重新下載代碼到本地，然后在實(shí)際項(xiàng)目中引入最新的iconfont文件。 再就是引入時(shí)文件路徑的問題，打包都需要注意。點(diǎn)擊下方卡片/微信搜索，關(guān)注公眾號“天宇文創(chuàng)意樂派”(ID:gh_cc865e4c536b)聽說點(diǎn)贊和關(guān)注本號的都找到漂亮的小姐姐了喲且年后必入百萬呀??！往期推薦分享6個(gè)實(shí)用的網(wǎng)站，非常Nice利用Vue 腳手架 開發(fā)chrome 插件，太方便了！Vue類似hooks的新庫VueUse使用NodeJs和JavaScript開發(fā)微信公眾號再見 Swagger UI！國人開源了一款超好用的 API 文檔生成框架，Star 4.7K+，真香??！JavaScript 細(xì)節(jié)和一些實(shí)際應(yīng)用，了解一下本文使用 文章同步助手 同步編輯于 2021-12-27 22:54圖標(biāo)Icon Font阿里軟件?贊同 4??添加評論?分享?喜歡?收藏?申請

iconfont-阿里巴巴矢量圖標(biāo)庫

iconfont-阿里巴巴矢量圖標(biāo)庫

百度知道 - 信息提示

百度知道 - 信息提示

百度首頁

商城

注冊

登錄

網(wǎng)頁

資訊

視頻

圖片

知道

文庫

貼吧采購

地圖更多

搜索答案

我要提問

百度知道>提示信息

知道寶貝找不到問題了>_

該問題可能已經(jīng)失效。返回首頁

15秒以后自動返回

幫助

?|?意見反饋

?|?投訴舉報(bào)

京ICP證030173號-1???京網(wǎng)文【2023】1034-029號???? ?2024Baidu??使用百度前必讀?|?知道協(xié)議?

CSS icon 屬性

CSS icon 屬性

w3school 在線教程

HTML 系列教程

瀏覽器腳本

服務(wù)器腳本

編程教程

XML 系列教程

建站手冊

參考手冊

CSS 參考手冊

CSS 參考手冊

CSS 瀏覽器支持

CSS 選擇器

CSS 函數(shù)

CSS 動畫相關(guān)屬性

CSS 網(wǎng)絡(luò)安全字體

CSS 字體回退

CSS 單位

CSS 顏色

CSS 顏色值

CSS 默認(rèn)值

CSS 實(shí)體

CSS 聽覺

CSS 屬性

align-content

align-items

align-self

all

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-repeat

background-size

border

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom

box-decoration-break

box-shadow

box-sizing

break-after

break-before

break-inside

caption-side

caret-color

@charset

clear

clip

clip-path

color

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

content

counter-increment

counter-reset

cursor

direction

display

empty-cells

filter

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

font

@font-face

font-family

font-feature-settings

font-kerning

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-variant-caps

font-weight

gap

grid

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column

grid-column-end

grid-column-gap

grid-column-start

grid-gap

grid-row

grid-row-end

grid-row-gap

grid-row-start

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

height

hyphens

@import

isolation

justify-content

justify-items

justify-self

@keyframes

left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

@media

min-height

min-width

mix-blend-mode

object-fit

object-position

opacity

order

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-x

overflow-y

padding

padding-bottom

padding-left

padding-right

padding-top

page-break-after

page-break-before

page-break-inside

perspective

perspective-origin

pointer-events

position

quotes

resize

right

row-gap

scroll-behavior

tab-size

table-layout

text-align

text-align-last

text-decoration

text-decoration-color

text-decoration-line

text-decoration-style

text-decoration-thickness

text-indent

text-justify

text-overflow

text-shadow

text-transform

top

transform

transform-origin

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

unicode-bidi

user-select

vertical-align

visibility

white-space

width

word-break

word-spacing

word-wrap

writing-mode

z-index

CSS icon 屬性

定義和用法

icon 屬性為創(chuàng)作者提供了將元素設(shè)置為圖標(biāo)等價(jià)物的能力。

注釋：除非 "content" 屬性的值被設(shè)置為 "icon"，否則元素的圖標(biāo)不會被使用。

實(shí)例

將圖像元素設(shè)置為圖標(biāo)化的等價(jià)物：

img

{

content:icon;

icon:url(imgicon.png);

}

CSS 語法

icon: auto|URL|inherit;

屬性值

值

描述

auto

使用由瀏覽器提供的默認(rèn)通用圖標(biāo)。

URL

引用列表中的一個(gè)或多個(gè)圖標(biāo)，列表用逗號分隔。

inherit

規(guī)定應(yīng)從元素繼承 icon 屬性的值。

技術(shù)細(xì)節(jié)

默認(rèn)值：

auto

繼承性：

no

版本：

CSS3

JavaScript 語法：

object.style.icon="url(image.png)"

瀏覽器支持

Chrome

IE / Edge

Firefox

Safari

Opera

不支持

不支持

不支持

不支持

不支持

CSS 參考手冊

CSS 實(shí)例

CSS 測驗(yàn)

CSS 教程

W3School 簡體中文版提供的內(nèi)容僅用于培訓(xùn)和測試，不保證內(nèi)容的正確性。通過使用本站內(nèi)容隨之而來的風(fēng)險(xiǎn)與本站無關(guān)。版權(quán)所有，保留一切權(quán)利。

關(guān)于 W3School

幫助 W3School

使用條款

隱私條款

技術(shù)支持：贏科

蒙ICP備06004630號

在網(wǎng)頁中使用 icon 字體圖標(biāo) | 前端開發(fā) - 知乎

在網(wǎng)頁中使用 icon 字體圖標(biāo) | 前端開發(fā) - 知乎首發(fā)于效率工具指南切換模式寫文章登錄/注冊在網(wǎng)頁中使用 icon 字體圖標(biāo) | 前端開發(fā)彭宏豪本文首發(fā)于我的個(gè)人號「效率工具指南」最近在 B 站上看 Pink 老師的前端視頻，簡單總結(jié)一下在網(wǎng)頁中使用 icon 圖標(biāo)的兩種方法。 直接插入字體圖標(biāo)這里說的字體圖標(biāo)，是指既有普通 icon 圖標(biāo)的外觀，又帶有字體特征的圖標(biāo)，可以像調(diào)整字體那樣、調(diào)整圖標(biāo)的大小和顏色，且圖標(biāo)放大之后不會失真變模糊。 我們一般是從網(wǎng)上下載字體圖標(biāo)的，譬如國內(nèi)的阿里巴巴旗下的矢量素材網(wǎng)站 iconfont、國外的 IcoMoon 等。去年寫過一篇文章《微信小程序開發(fā) | 如何在小程序中使用自定義 icon 圖標(biāo)》，其中介紹了 iconfont 圖標(biāo)的使用，這回介紹一下使用來自 IcoMoon 的圖標(biāo)的方法。 打開 IcoMoon 圖標(biāo)官網(wǎng)，從中挑選你想使用的 icon 圖標(biāo)，底部的 Selection 會統(tǒng)計(jì)你選中的圖標(biāo)數(shù)量，選好圖標(biāo)之后，點(diǎn)擊右下角的 Generate Font，生成字體圖標(biāo)。在打開的頁面，會顯示我們剛才挑選的所有 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 最常見的字體Web Open Font Format 字體(.woff)：支持的瀏覽器有 IE 9+、Firefox 3.5+、Chrome 6+、Safari 3.6+、Opera 11.1+Embedded Open Type 字體(.eot)：是 IE 專用的字體，支持的瀏覽器有 IE 4+ SVG 字體(.svg)：是基于 SVG 字體渲染的一種格式，支持的瀏覽器有 Chrome 4+、Safari 3.1+、Opera 10.0+、iOS Mobile Safari 3.2+將 fonts 文件夾復(fù)制到網(wǎng)頁的項(xiàng)目文件夾 中，譬如放在與 index.html 文件同級的路徑下。打開 HTML 文件，在 style 標(biāo)簽中粘貼下方的代碼，定義我們等下需要用到的字體 icomoon。需要注意的是，如果 fonts 文件與 html 文件在同個(gè)路徑下，就不需要修改下方代碼中的 url 地址。粘貼代碼之后，先來看一下我們最終想要實(shí)現(xiàn)的效果，如下圖，下方的紅色愛心??圖標(biāo)，就是前面說到的字體圖標(biāo)。根據(jù)最終想要實(shí)現(xiàn)的效果，我們要去到 html 文件中書寫相應(yīng)的代碼。在 html 文件的 body 標(biāo)簽中輸入下方的一行代碼，中間的 span 標(biāo)簽包含的方塊，其實(shí)就是愛心圖標(biāo)，只不過它無法在 html 文件中正常顯示。

我 ? 你

這個(gè)方塊也不是隨意輸入的，還得從我們前面下載的壓縮文件夾中的 demo.html 查看。在瀏覽器中打開 demo.html ，移動到愛心圖標(biāo)右下角的區(qū)域，框選有時(shí)看得到、有時(shí)看不到的方塊字符，復(fù)制到剪貼板，接著粘貼到 html 文件中。將方塊字符粘貼到 html 中，如果此時(shí)在瀏覽器中預(yù)覽網(wǎng)頁效果的話，還是無法看到剛添加的字體圖標(biāo)的，因?yàn)檫€缺少對字體圖標(biāo)設(shè)置 CSS 樣式——聲明字體圖標(biāo)所使用的字體。html：

我?你

css：p span {

font-family: 'icomoon';

}此時(shí)在瀏覽器中重新打開 html 文件，我們所使用的字體圖標(biāo)就會正常顯示了。如果你還想調(diào)整字體圖標(biāo)的大小和顏色，可以在 CSS 中增加另外兩個(gè)屬性：font-size 和 color。css：p span {

font-family: 'icomoon';

font-size: 50px;

color: red;

}一番設(shè)置之后，重新在瀏覽器中刷新頁面，就可以看到最終的效果啦。通過偽類選擇器使用字體圖標(biāo)前面介紹的第一種方法，需要同時(shí)在 body 標(biāo)簽(html) 和 style 標(biāo)簽(css) 中同時(shí)書寫相關(guān)的代碼，如果我們想讓 html 文件的結(jié)構(gòu)更加簡單，我們可以通過第二種方法——在 style 標(biāo)簽(css) 中通過偽類選擇器使用字體圖標(biāo)，這樣就只需要在 style 標(biāo)簽或 css 文件中書寫相關(guān)的代碼。 先來看一下我們最終想要實(shí)現(xiàn)的效果，如下圖所示，給輸入框的右側(cè)添加一個(gè)向下的小三角 圖標(biāo)。想制作這個(gè)效果，同樣是先從前面介紹的 IcoMoon 網(wǎng)站下載字體圖標(biāo)，將解壓后的文件中的 fonts 文件夾放到與 index.html 同級的路徑下，接著在 html 的 style 標(biāo)簽中粘貼下方的代碼：在 html 的 body 標(biāo)簽中插入一個(gè)空白的盒子 div 標(biāo)簽：

接著在 style 標(biāo)簽中，給 div 盒子設(shè)置寬度、高度，并給它設(shè)置一個(gè)粗細(xì)為 1 px 的灰色邊框：

此時(shí)在瀏覽器中打開 html 文件，就可以看到下圖所示的孤零零的輸入框。接著繼續(xù)給這個(gè)輸入框「添磚加瓦」——添加一個(gè)向下的小三角 ，繼續(xù)在 style 標(biāo)簽中書寫代碼：div::after {

content: '?';

font-family: 'icomoon';

}稍微解釋一下這個(gè)代碼，在 div 后面加上兩個(gè)英文中的冒號，并且跟上單詞 after 或者 before，就是所謂的偽類選擇器，在我目前的認(rèn)知范圍內(nèi)，偽類選擇器就是用 css 代碼來給 html 頁面添加額外的元素，我們也確實(shí)可以在網(wǎng)頁中看到添加的小三角，如下圖。但這段代碼是寫在 css 而非 html 文件中，一定程度上可以簡化 html 文件的代碼。到這里，我們就順利地在 html 頁面中添加了字體圖標(biāo)，值得一提的是，偽類選擇器中 content 屬性的值，除了可以是字體圖標(biāo)對應(yīng)的方塊字符，還可以是字體圖標(biāo)下方的編號。以下圖為例，愛心圖標(biāo)的編號是 e9da，因此 content 屬性的值也可以是 \e9da ，通過編號來調(diào)用字體圖標(biāo)的時(shí)候，需要在編號的最前面加多一個(gè)反斜桿 \ 。div::after {

content: '\e9da';

font-family: 'icomoon';

}引入字體圖標(biāo)之后，字體圖標(biāo)默認(rèn)位于輸入框的左上角，為了將字體圖標(biāo)移動到右側(cè)居中的位置，這里還需要用到另外的知識——定位，包含相對定位和絕對定位。關(guān)于定位的知識，這里暫時(shí)就不過多展開了，可以記住一個(gè)口訣「子絕父相」，即子元素設(shè)置絕對定位，父元素設(shè)置相對定位，就可以達(dá)到自由移動下拉小三角位置的目的。分別給 div 和偽元素選擇器 div::after 添加另外的樣式：div {

position: relative;

}

div::after {

position: absolute;

top: 12px;

right: 10px;

}這里的 top 和 right 屬性的值，并不是唯一的，需要根據(jù)實(shí)際情況，配合瀏覽器的開發(fā)者工具進(jìn)行調(diào)整，最終得到看起來比較舒適的值（主要就是調(diào)整到小三角可以位于輸入框水平居中的位置），最終效果如下。以上，就是本次想和你分享的內(nèi)容。希望對有需要的朋友有幫助。發(fā)布于 2021-09-19 08:13字體前端開發(fā)網(wǎng)頁設(shè)計(jì)?贊同 5??5 條評論?分享?喜歡?收藏?申請轉(zhuǎn)載?文章被以下專欄收錄效率工具指南公主號同專欄名，歡

使用Icon圖標(biāo)的幾種方式_