有時，開發人員需要將文字放入圖示中。例如，在「喜歡」圖示內新增喜歡的總數可以使 UI 更好，在評論圖示內新增評論，在任何圖示中顯示特定的數字等。
在 HTML 中，我們可以分別加入文字和圖示。之後，我們可以設定文字的位置，將它們放置在圖示的中間。在本教程中，我們將學習將文字放入已建立的圖示內的不同範例。
文法
使用者可以按照下面的語法設定文字的位置，將其放入已建立的圖示內。
text {
position: absolute;
text-align: center;
width: value;
padding-top: value;
}
在上面的語法中，「絕對」位置會根據父元素的位置來變更文字的位置。另外，我們需要根據圖示的寬度和 padding-top 指定文字的寬度，以將文字放在圖示的中間。
範例 1（使用圖示的 Ionic 框架）
在下面的範例中，我們使用 ionic 框架在網頁上顯示圖示。在這裡，我們在網頁上新增了心形圖示。此外，我們還添加了數位文字。在 CSS 中，我們設定圖示的字體大小和「絕對」位置。此外，我們還設定了文字寬度和頂部填充，將文字放置在中間。
在輸出中，使用者可以觀察心形圖示中間的文字。
<html>
<head>
<style>
.text {
font-size: 2rem;
position: absolute;
text-align: center;
width: 8rem;
padding-top: 4rem;
}
</style>
<link href = "https://code.ionicframework.com/1.3.0/css/ionic.min.css" rel = "stylesheet" />
</head>
<body>
<h3 id="Placing-the-i-text-inside-the-icon-i-using-CSS"> Placing the <i> text inside the icon </i> using CSS </h3>
<div>
<span>
<span class = "text"> LOVE </span>
<i style = "font-size: 10rem;" class = "ion-ios-heart-outline"> </i>
</span>
</div>
</body>
</html>
範例 2（使用 Font-awesome 函式庫）
在下面的範例中，我們使用 font-awesome 庫在網頁上新增圖示。 font-awesome 庫包含一些預先定義的圖標，其中包含我們可以更改的文字。
這裡，我們使用span元素來新增圖示。此外，我們使用帶有圖標和文字元素的不同類別名稱，將文字元素放在圖標中間。
在輸出中，我們可以看到圖示內的文字。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>
<h2 id="Placing-the-i-text-inside-the-icon-i-using-CSS"> Placing the <i> text inside the icon </i> using CSS</h2>
<div>
<span class = "fa-stack fa-3x">
<i class = "fa fa-comment fa-stack-2x"> </i>
<strong class = "fa-stack-1x fa-stack-text fa-inverse"> 87 </strong>
</span>
<span class = "fa-stack fa-3x">
<i class = "fa fa-certificate fa-stack-2x"> </i>
<span class = "fa fa-stack-1x fa-inverse"> 3 </span>
</span>
</div>
</body>
</html>
我們學習了使用 CSS 在圖示內加入文字。我們需要根據父元素設定文字的位置並調整內邊距或邊距。此外，使用者可以使用 CSS 建立自訂圖標，並嘗試將文字放置在其中，而不是使用預先建立的 SVG 圖標。
以上是如何將文字放置在已建立的圖示內部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要
JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Linux新版
SublimeText3 Linux最新版
Dreamweaver CS6
視覺化網頁開發工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
