HTML如何制作在透明輸入框里面添加圖標

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間）

.什么是字體圖標

可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。

2.字體圖標常用免費資源

（1）iconmoon字體圖標庫：https://icomoon.io/app

（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/

（3）font-awesome字體圖標庫：

3.字體圖標使用步驟

以iconmoon為例

（1）選擇需要的圖標并下載

1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

其他字體

e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。

2）字體轉換

https://www.fontke.com/tool/convfont/

（2）字體圖標的引入

1）把字體放到項目的相應位置

將下載解壓后的fonts文件夾放到項目路徑下

2）在html頁面中引入字體

利用CSS的@font-face屬性，引入外部字體；

在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。

在html的style標簽中引入如下代碼：

@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）為元素添加內容

復制demo.html中需要的圖標，如下，將其作為元素的內容。

<span>?</span>

（3）新增字體圖標的引入

當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。

網頁中很多小的圖標不一定是圖片。
通過字符符號做出來的圖標，可以矢量放大，更加方便實用。
這里就學習一下如何在網頁中加入iconfont。
更多的文章請關注我的頭條號，我是落筆承冰。

一、創建一個空白的html網頁test1.html。

二、瀏覽器中打開iconfont的官網https://www.iconfont.cn/。

三、注冊并登錄iconfont網站，注冊這步我就不說了，但凡有點智商的人都知道如何注冊。注冊之后，點擊“我的項目”創建一個項目。

四、簡單給項目起個名，做個描述什么的，其它默認就可以了。

五、然后，我們再進入圖標庫去選圖標吧。

點選你看中的圖標，放入購物車。

網頁右上角的購物數量會隨你的選擇而增加。

六、點擊右上角的購物車，然后我們把選好的圖標添加到項目中去。

七、進入項目看一下，好吧，我一共選了8個圖標。

八、接下來，就是要用這些圖標的時候了，點擊項目中的“下載至本地”。

九、它是一個壓縮文件，你解壓它，會發現有很多文件。

十、這些文件，我選中的才是有用的，就是iconfont.css和字體文件，其它都沒有用。

十一、我把這些文件拷貝到相應的目錄下，這里我拷貝到css文件夾中。

十二、我們開始試著調用它們吧，創建一個盒子，加兩個字“搜索”。

十三、引入iconfont.css文件，并調用iconfont樣式。

十四、從官網中找到圖標對應的代碼，然后粘貼到你想要添加的位置就可以了。

十五、最后你可以像普通字符一樣調整它們的大小。

在線咨詢

上一篇：電子取證綜合分析軟件的利器：x-ways forensics
下一篇：如何使用PHP驗證和過濾HTML表單提交的數據？示例代碼剖析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。