亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS運(yùn)用阿里巴巴矢量庫快速在對(duì)應(yīng)位置加上好看的圖標(biāo)效果(實(shí)例代碼)

  發(fā)布時(shí)間：2020-04-14 15:27:09   作者：夾葉   我要評(píng)論
這篇文章主要介紹了CSS運(yùn)用阿里巴巴矢量庫快速在對(duì)應(yīng)位置加上好看的圖標(biāo)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

進(jìn)入阿里巴巴矢量圖標(biāo)庫

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

  • 選擇喜歡的圖標(biāo)的，點(diǎn)擊添加到庫
  • 選擇完之后，點(diǎn)擊右上角的購物車圖標(biāo)（前提是已經(jīng)登錄，推薦使用GitHub登錄）
  • 然后在右側(cè)中點(diǎn)擊添加至項(xiàng)目
  • 之后在個(gè)人主頁中可以看見

1.Unicode
2.Font class

此次便是對(duì)于這兩個(gè)的使用

Unicode

開始進(jìn)入時(shí)，會(huì)自動(dòng)生成代碼，如果沒有，則點(diǎn)擊生成
例:

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

其中最最關(guān)鍵的是iconfont

同時(shí)，我們還需要修改其對(duì)應(yīng)的url路徑

以第一個(gè)舉例

<!--原來的url-->
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!--修改后的的url,打開瀏覽器之后訪問一下對(duì)應(yīng)的url，提示下載eot文件則修改成功-->
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

Unicode中對(duì)于圖標(biāo)的引用如下

在剛剛的個(gè)人頁面中，選中Unicode可以看見加入的圖標(biāo)都在下面,以搜索舉例

在這里插入圖片描述

鼠標(biāo)滑上去以后可以看見復(fù)制代碼的圖標(biāo)，點(diǎn)擊復(fù)制

以下為實(shí)例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖標(biāo)使用</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 1743720 */
            src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
            src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),
            url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
        }

        .wrapper {
            width: 1090px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0px auto;
            text-align: center;
        }

        .iconTest::before {
        	/*此處為復(fù)制來的圖標(biāo)代碼，修改為以下形式*/
            /* content: "&#xe61a;"; */
            content: "\e61a";
            font-family: "iconfont";
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <span class="iconTest"> : Hello CSS</span>
        </div>
    </div>
</body>
</html>

效果圖

在這里插入圖片描述

###Font Class中對(duì)于圖標(biāo)的引用

這個(gè)就要簡(jiǎn)便很多了

在圖標(biāo)庫個(gè)人主頁的Unicode旁邊就是Fonte Class點(diǎn)擊，再任選一個(gè)圖標(biāo)，復(fù)制代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖標(biāo)使用</title>
    <!--以引入css資源的方式使用，url同樣修改一下，加入https://-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
    <style>
        .wrapper {
            width: 1090px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
        	<!--iconfont表示這個(gè)是一個(gè)圖標(biāo)樣式-->
        	<!--icon-sousuot表示這個(gè)是圖標(biāo)中的搜索-->
            <span class="iconfont icon-sousuo"></span><span> : Hello CSS</span>
        </div>
    </div>
</body>
</html>

更加簡(jiǎn)便的使用

有時(shí)候，一個(gè)復(fù)雜的網(wǎng)頁包含各種圖標(biāo)的引用，例如導(dǎo)航欄每個(gè)欄目的前面都要一個(gè)圖標(biāo)，這個(gè)便用到了了::before,而同樣后面有時(shí)候又要用span來引用圖標(biāo)，這時(shí)，我們便可以引入Font-Class中的使用方法卻達(dá)到了兩種場(chǎng)景的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖標(biāo)使用</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
    <style>
        .wrapper {
            width: 1090px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0px auto;
            text-align: center;
        }

        .iconTest::after {
            content: "\e61a";
            font-family: "iconfont";
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hello CSS</span>
        </div>
    </div>
</body>
</html>

效果便是Hello CSS前后都有搜索圖標(biāo)

原因：打開引入的css我們可以發(fā)現(xiàn)其中也包含了Unicode，因此之后的使用只需要引入Font-Class即可，而圖標(biāo)對(duì)應(yīng)的十六進(jìn)制編碼在Unicode中復(fù)制，也算是一個(gè)小技巧。

總結(jié)

到此這篇關(guān)于CSS運(yùn)用阿里巴巴矢量庫快速在對(duì)應(yīng)位置加上好看的圖標(biāo)效果(實(shí)例代碼)的文章就介紹到這了,更多相關(guān)css 阿里巴巴矢量圖標(biāo)庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論