整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
們經(jīng)常需要在設(shè)計(jì)Web頁(yè)面或者做H5APP的時(shí)候經(jīng)常需要使用圖標(biāo)和文字結(jié)合的方式增強(qiáng)頁(yè)面元素的前端效果，比如登錄頁(yè)面中的用戶(hù)名和密碼經(jīng)常就是圖標(biāo)和文字結(jié)合的方式展現(xiàn)的。
一、文字前面加小圖標(biāo)的三種方法
我這里講三種方法，經(jīng)過(guò)測(cè)試，我主要推薦最后一種方法，因?yàn)轱@示效果最好，同時(shí)也實(shí)現(xiàn)圖標(biāo)和文字完美對(duì)齊。
1、增加一個(gè)img標(biāo)簽指向圖標(biāo)路徑
代碼截圖：
代碼內(nèi)容：
<!--css代碼-->
.mui-input-row{
line-height: 40px;
height: 40px;
}
<!--元素-->
<div class="mui-input-row">
<img src="../images/datetime.png" style="width:20px;height:20px">
<span>日期</span>
</div>
2、增加一個(gè)span標(biāo)簽設(shè)置背景圖片樣式
代碼截圖：
代碼內(nèi)容：
<!--css代碼-->
.mui-input-row{
line-height: 40px;
height: 40px;
}
.img{
background: url(../images/datetime.png) no-repeat center / 100%;
width:20px;
height:20px;
display:inline-block;
margin-left:7px;
}
<!--元素-->
<div class="mui-input-row">
<span class='img'></span>
<span>日期</span>
</div>
3、為文字標(biāo)簽設(shè)置背景圖片(推薦)
代碼截圖：
代碼內(nèi)容：
<!--css代碼-->
.mui-input-row{
line-height: 40px;
height: 40px;
}
.img{
background: url(../images/datetime.png) no-repeat left / 20px;
display: inline-block;
margin-left:15px;
width:60px;
text-align: right;
}
<!--元素-->
<div class="mui-input-row">
<span class='img'>日期</span>
</div>
三種方法的效果展示：
上圖三個(gè)日期圖標(biāo)分別是按照以上三種方法實(shí)現(xiàn)的，通過(guò)效果對(duì)比可以明顯看出最后一種方法對(duì)齊情況最好，所以推薦大家都用這種方法，而且代碼量少，也不需要多余的標(biāo)簽，非常方便，所以大家快去嘗試吧~
單、漂亮的開(kāi)源圖標(biāo)庫(kù)，目前共計(jì) 280+ 個(gè)圖標(biāo)，支持在線搜索查找圖標(biāo)
官方網(wǎng)站：https://feathericons.com/
github地址
https://github.com/featheric
安裝 npm
npm install feather-icons --save<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>要在頁(yè)面上使用圖標(biāo),請(qǐng)?zhí)砑觗ata-feather 帶有元素圖標(biāo)名稱(chēng)的屬性:
<i data-feather="circle"></i>
使用方法:
web開(kāi)發(fā)中，我們經(jīng)常要用到一些小圖標(biāo)（加減勾叉等）。通常做法就兩種：
1、直接使用圖片；
2、使用css/svg直接在瀏覽器中繪制圖標(biāo)；
方案1
由于圖標(biāo)圖片比較多，而且體積很小，為了減少請(qǐng)求，我們需要用雪碧圖將圖標(biāo)拼湊在同一張圖片里面，修改維護(hù)十分麻煩！
現(xiàn)在比較好的方案是使用webpack引入圖片，小圖直接轉(zhuǎn)換成base64插入css中。直接使用圖片比較簡(jiǎn)單，這也是目前比較主流的做法。
● 方案2
相比方案1，明顯可以減小資源的體積，只需要幾條css/svg命令就可以繪制出精美的圖標(biāo)，而且不受圖片尺寸限制，可大可小非常靈活。
初看方案2的一堆代碼可能會(huì)覺(jué)得非常難，但其實(shí)很多簡(jiǎn)單的圖標(biāo)都是非常容易實(shí)現(xiàn)的。
接下來(lái)就是同學(xué)們最期待的小智手把手教學(xué)時(shí)間啦。
01 暫停按鈕
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>02 加號(hào)按鈕
.box{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -35px;
cursor: pointer;
}
</style>
<body>
<div class="box"></div>
</body>03 關(guān)閉按鈕
<style>
.box{
width: 30px;
height: 0;
color: black;
box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
}
</style>
<body>
<div class="box"></div>
</body>04 菜單按鈕
用陰影實(shí)現(xiàn)
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>用背景裁剪實(shí)現(xiàn)
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>用漸變函數(shù)實(shí)現(xiàn)
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
}
</style>
<body>
<div class="box"></div>
</body>05 文章圖標(biāo)
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
outline: 18px solid #ffffff;
outline-offset: -25px;
transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>06 單選按鈕
.box{
width:0;
color: #000;
border: 3px solid black;
outline: 6px dotted ;
outline-offset: 6px;
}
.box{
width:0;
padding: 3px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}
.box{
height: 6px;
width: 6px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}07 靶子圖標(biāo)
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}08 田字圖標(biāo)
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}09 下載箭頭
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}10 下載箭頭（帶橫線）
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}11 禁用圖標(biāo)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
