Kỹ thuật dồn các icon vào 1 file để hiển thị khi làm web

Dồn các icon vào 1 file khi làm web thì chẳng có gì xa lạ cả, chỉ là thủ thuật css để cắt và hiển thị icon mong muốn vào một vị trí cụ thể mà thôi.

Mình viết bài này chủ yếu là để lưu lại cho chính mình khi cần dùng đến, ưu nhược điểm của phương pháp dồn các file này lại hay tách riêng ra mình không bàn đến trong bài viết này, các bạn tự trãi nghiệm và cho ý kiến nhé. Cách làm như sau:

Bước 1: Để dồn các file đồ hoạ phục vụ thiết kế web vào 1 file (thường là png nền trong suốt) thì trước hết bạn tập hợp lại bằng các phần mềm thiết kế. Phía dưới là 1 file sau khi dồn lại.

Bước 2: Muốn load icon vào một vị trí bất kỳ thì ta dùng đoạn CSS như sau

vd: muốn thêm icon cho class codfe-icon

<span class="codfe-icon"></span>

1	<span class="codfe-icon"></span>

ta thêm css tương ứng như sau:

.codfe-icon {
	width:50px;
	height:50px;
	float:left;
	background-position:-132px -30px<span class="value" aria-label="CSS property value: -132px -30px!important">!important</span><span class="styles-semicolon">;</span>
	background:url('https://codfe.com/wp-content/uploads/2024/08/don-cac-icon-vao-mot-file.png') no-repeat;
	vertical-align: middle;
}

.codfe-icon {

width:50px;

height:50px;

float:left;

background-position:-132px -30px<span class="value" aria-label="CSS property value: -132px -30px!important">!important</span><span class="styles-semicolon">;</span>

background:url('https://codfe.com/wp-content/uploads/2024/08/don-cac-icon-vao-mot-file.png') no-repeat;

vertical-align: middle;

}

trong đó …/don-cac-icon-vao-mot-file.png là đường dẫn file đã tạo bước 1, background-position: -132px -30px; là vị trí icon cần hiển thị