ການລະບຸກການລະບຸກການອອກສັນຍາ CSS

ວິທະຍາທີ່ຈະເພີ່ມອານູບ

ຫົວວິທະຍາທີ່ງາຍດາຍທີ່ສຸດໃນການເພີ່ມອານູບໃນເວັບ HTML ແມ່ນໃຊ້ສະຖານີອານູບ.

ເພີ່ມຊື່ວິທະຍາທີ່ກ່ຽວກັບອານູບສະແກນຫາປະກອບ HTML ທີ່ຈະໃຊ້ (ເຊັ່ນ <i> ຫຼື <span>).

ທຸກອານູບໃນສະຖານີອານູບດັ່ງກ່າວກໍ່ມີຄວາມຫຼາຍຢ່າງສາມາດຂະຫຍາຍມາໄດ້ (SVG) ແລະສາມາດໃຊ້ CSS ເພື່ອອອກແບບ (ຂະໜາດ, ສີ, ສັບສັນ, ແລະອີກຫຼາຍໆຢ່າງ).

ອານູບສະບັບ Font Awesome

ຖ້າທ່ານຕ້ອງໃຊ້ສີນວັດ Font Awesome ໃນ <head> ຂອງເວັບ HTML ຂອງທ່ານຈະເຂົ້າຫາ fontawesome.com ເຂົ້າເຖິງສະໜາມມາບັນທຶກລະຫັດທີ່ທ່ານຕ້ອງໃຊ້ແລະເພີ່ມລະຫັດນັ້ນເຂົ້າໃນ <head> ຂອງເວັບ HTML.

<script src="https://kit.fontawesome.com/yourcode.js"></script>

ການອ່ານຫຼາຍເນື້ອຫາກວາງຫຼາຍຂອງພວກເຮົາກ່ຽວກັບການເລີ່ມນຳໃຊ້ Font Awesome 5.

ຄຳເຕືອນ:ບໍ່ຕ້ອງດາວດານລົງມາຫຼືຕິດຕັ້ງ!

ຄວາມຈະເປັນ

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>


<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

结果：

亲自试一试

ສີນວັດ Bootstrap

ຖ້າທ່ານຕ້ອງໃຊ້ສີນວັດ Bootstrap glyphicons ໃນ <head> ຂອງເວັບ HTML ຂອງທ່ານຈະກວດກາຄືນພາຍໃນນີ້:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

ຄຳເຕືອນ:ບໍ່ຕ້ອງດາວດານລົງມາຫຼືຕິດຕັ້ງ!

ຄວາມຈະເປັນ

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

结果：

亲自试一试

ສີນວັດ Google

ຖ້າທ່ານຕ້ອງໃຊ້ສີນວັດ Google ໃນເວັບ HTML ຂອງທ່ານຈະກວດກາຄືນພາຍໃນ <head> ຂອງເວັບຂອງທ່ານທີ່ຖືກກ່າວຫຼັງນີ້:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

ຄຳເຕືອນ:ບໍ່ຕ້ອງດາວດານລົງມາຫຼືຕິດຕັ້ງ!

ຄວາມຈະເປັນ

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


cloud
favorite
attachment
computer
traffic

结果：

亲自试一试