Bagaimanakah saya boleh meletakkan teks di dalam ikon yang dibuat?-tutorial css-php.cn

Bagaimanakah saya boleh meletakkan teks di dalam ikon yang dibuat?

WBOY

Lepaskan： 2023-09-01 22:21:07

ke hadapan

1528 orang telah melayarinya

Bagaimanakah saya boleh meletakkan teks di dalam ikon yang dibuat?

Kadangkala pembangun perlu memasukkan teks ke dalam ikon. Contohnya, menambah jumlah bilangan suka dalam ikon Suka boleh menjadikan UI lebih baik, menambahkan ulasan di dalam ikon Ulasan, menunjukkan nombor tertentu dalam sebarang ikon, dsb.

Dalam HTML, kami boleh menambah teks dan ikon secara berasingan. Selepas itu, kita boleh menetapkan kedudukan teks, meletakkannya di tengah-tengah ikon. Dalam tutorial ini kita akan mempelajari contoh yang berbeza untuk meletakkan teks di dalam ikon yang dibuat.

Tatabahasa

Pengguna boleh mengikut sintaks di bawah untuk menetapkan kedudukan teks dan meletakkannya dalam ikon yang dibuat.

text {
   position: absolute;
   text-align: center;
   width: value;
   padding-top: value;
}

Salin selepas log masuk

Dalam sintaks di atas, kedudukan "mutlak" menukar kedudukan teks berdasarkan kedudukan elemen induk. Selain itu, kita perlu menentukan lebar teks berdasarkan lebar ikon dan padding-top untuk meletakkan teks di tengah-tengah ikon.

Contoh 1 (Rangka kerja ionik menggunakan ikon)

Dalam contoh di bawah, kami menggunakan rangka kerja ionik untuk memaparkan ikon pada halaman web. Di sini kami telah menambahkan ikon hati pada halaman web. Selain itu, kami telah menambah teks digital. Dalam CSS, kami menetapkan saiz fon dan kedudukan "mutlak" ikon. Selain itu, kami menetapkan lebar teks dan padding atas untuk meletakkan teks di tengah.

Dalam output, pengguna boleh memerhati teks di tengah-tengah ikon hati.

<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> 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>

Salin selepas log masuk

Contoh 2 (menggunakan perpustakaan Font-hebat)

Dalam contoh di bawah, kami menggunakan perpustakaan hebat fon untuk menambah ikon pada halaman web. Pustaka hebat fon mengandungi beberapa ikon yang dipratentukan dengan teks yang boleh kami ubah.

Di sini, kami menggunakan elemen span untuk menambah ikon. Selain itu, kami menggunakan nama kelas yang berbeza dengan ikon dan elemen teks, meletakkan elemen teks di tengah-tengah ikon.

Dalam output kita boleh melihat teks di dalam ikon.

<html>
<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>
   <h2> 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>

Salin selepas log masuk

Kami belajar menambah teks di dalam ikon menggunakan CSS. Kita perlu menetapkan kedudukan teks berdasarkan elemen induk dan melaraskan padding atau margin. Selain itu, pengguna boleh membuat ikon tersuai menggunakan CSS dan cuba meletakkan teks di dalamnya dan bukannya menggunakan ikon SVG yang telah dibina sebelumnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh meletakkan teks di dalam ikon yang dibuat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!