整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
最近在寫一個(gè)律師推薦前臺(tái)的網(wǎng)站，在上面搜索框這里出現(xiàn)了問題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……
話不多說(shuō)，我們直接進(jìn)入主題 ：
其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個(gè)div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框
我們最直接上代碼：HTML：
<div class="search">
<form action="http://baidu.com">
<input type="text" placeholder="請(qǐng)輸入查找的律師或?qū)ｉL(zhǎng)">
<span>
<a href="#"><img src="img/icon1.png" alt=""></a>
</span>
</form>
</div>
CSS:這里是設(shè)置外面整個(gè)div的樣式
.search {
width: 250px;
height: 35px;
border: 1px solid white;
border-radius: 30px;
}
這里是設(shè)置里面的輸入框的長(zhǎng)寬、boder為0px、里面的字體大小、點(diǎn)擊不會(huì)亮邊框(outline:none)設(shè)置透明度這里使用rgba()，最后一個(gè)屬性就是透明度（在0-1之間 ）
者：前端日志
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/c-Us1Nm_8BqRD2Vc0l9emA
可以看作一種特殊字體，其展示的是圖標(biāo)，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標(biāo)加載快、不變形。也可以看作是矢量格式的圖標(biāo)。
（1）iconmoon字體圖標(biāo)庫(kù)：https://icomoon.io/app
（2）阿里iconfont字體圖標(biāo)庫(kù)：https://www.iconfont.cn/
（3）font-awesome字體圖標(biāo)庫(kù)：
以iconmoon為例
（1）選擇需要的圖標(biāo)并下載
1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同
a）.tff格式（TrueTypeFont），美國(guó)蘋果公司和微軟公司共同開發(fā)的，在Windows和Mac操作系統(tǒng)中為默認(rèn)字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。
b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網(wǎng)頁(yè)所采用的字體格式標(biāo)準(zhǔn)，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設(shè)計(jì)用來(lái)在網(wǎng)頁(yè)使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。
d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語(yǔ)言，用來(lái)描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。
其他字體
e）.otf格式（Open Type Font），Microsoft和Adobe公司開發(fā)的，.otf格式比.ttf更為強(qiáng)大，可以把PostScript字體嵌入到TrueType中。
2）字體轉(zhuǎn)換
https://www.fontke.com/tool/convfont/
（2）字體圖標(biāo)的引入
1）把字體放到項(xiàng)目的相應(yīng)位置
將下載解壓后的fonts文件夾放到項(xiàng)目路徑下
2）在html頁(yè)面中引入字體
利用CSS的@font-face屬性，引入外部字體；
在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。
在html的style標(biāo)簽中引入如下代碼：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）為元素用該字體
span {
font-family: "icomoon";
}4）為元素添加內(nèi)容
復(fù)制demo.html中需要的圖標(biāo)，如下，將其作為元素的內(nèi)容。
<span>?</span> （3）新增字體圖標(biāo)的引入
當(dāng)利用iconmoon選用字體圖標(biāo)時(shí)，如果有新增的字體圖標(biāo)需要加入，則需要用到.json文件，如下，在原先選擇的基礎(chǔ)上，再選擇新選擇的字體圖標(biāo)，然后再下載使用。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
