前端使用iconfont圖標(biāo)技巧(無(wú)需下載字體文件到本地)

1.將圖標(biāo)添加到購(gòu)物車(chē)


image.png

2.將購(gòu)物車(chē)的圖標(biāo)添加到項(xiàng)目中(可自己新建)


image.png

image.png

image.png

3.生成線上引用地址
_1.刷新代碼


image.png

_2.復(fù)制鏈接地址
注意:這里生成的鏈接地址,并不能直接使用,需要在url后面加上

 https://

例如我在html中引用iconfont圖標(biāo)就是:

<style>
    @font-face {
        font-family: 'iconfont';
        /* project id 1580545 */
        src: url('https://at.alicdn.com/t/font_1580545_97ftmamxgsf.eot');
        src: url('https://at.alicdn.com/t/font_1580545_97ftmamxgsf.eot?#iefix') format('embedded-opentype'),
            url('https://at.alicdn.com/t/font_1580545_97ftmamxgsf.woff2') format('woff2'),
            url('https://at.alicdn.com/t/font_1580545_97ftmamxgsf.woff') format('woff'),
            url('https://at.alicdn.com/t/font_1580545_97ftmamxgsf.ttf') format('truetype'),
            url('https://at.alicdn.com/t/font_1580545_97ftmamxgsf.svg#iconfont') format('svg');
    }

</style>
 .icon {
  /* 引用iconfont圖標(biāo) */
        font-family: "iconfont";
        font-size: 36px;
    }

如果你覺(jué)得這篇文章對(duì)你有幫助的話,可以在支付寶首頁(yè)搜索:587954734 領(lǐng)取紅包,給小編謀個(gè)雞骨頭福利哦。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容