Ủng hộ biểu tượng bootstrap

Chào các bạn. Ngày nay thiết kế web ngày càng phát triển và ngày càng có nhiều kỹ thuật mới được sử dụng, một trong những kỹ thuật hay đó là sử dụng các biểu tượng css. Tưởng nhớ các bạn đã từng nghe và sử dụng. Tuy nhiên, bạn sử dụng nó nhưng bạn đã hiểu về khái niệm thực sự của nó là gì chưa?

Cách thêm biểu tượng

Cách đơn giản nhất để thêm biểu tượng vào một phần tử html là sử dụng thư viện của họ. Như Phông chữ Tuyệt vời, chỉ cần thêm biểu tượng tên đó vào bất kỳ dòng nội dung HTML nào. Tất cả các biểu tượng trong thư viện biểu tượng đều thuộc định dạng vector có thể phóng to [tỷ lệ] trong CSS [kích thước, màu sắc, bóng…]

phông chữ tuyệt vời

Để có thể sử dụng biểu tượng của Font Awesome ta cần thêm dòng dưới đây vào phần đầu trong trang HTML

VÍ dụ icon bằng Font Awesome

Biểu tượng Bootstrap

Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần trong trang HTML. Cách này cũng không cần tải hay cài đặt gì.

Ví dụ icon với Bootstrap

Biểu tượng Google

Để có thể dùng google Icon, ta thêm dòng dưới đây vào phần trong trang HTML. Cũng giống 2 cách trên, bạn không cần tải hay cài đặt gì cả.

VÍ dụ về cách sử dụng Google Icon

cloud
favorite
attachment
computer
traffic

You can see more

Chuyển tiếp CSS

Chuyển đổi CSS 3D

Bảng CSS

Hình ảnh đường viền CSS

Lời kết

Bài học của mình hôm nay đến đây kết thúc rồi. Xin chào các bạn trong các seri tiếp theo nhé. Chúc các bạn có một ngày làm việc vui vẻ

Tất cả các bài viết. Bootstrap

• Xem chi tiết

  VIP CARD 365

  Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com

  Xem chi tiết

  Bước 2. Tạo cấu trúc CSS

  .box > .icon {	text-align: center;	position: relative;}.box > .icon > .image {	position: relative;	z-index: 2;	margin: auto;	width: 88px;	height: 88px;	border: 8px solid white;	line-height: 88px;	border-radius: 50%;	background: rgb[170,196,196];	vertical-align: middle;}.box > .icon:hover > .image {	background: #6CB4C4;}.box > .icon > .image > i {	font-size: 36px !important;	color: #fff !important;}.box > .icon:hover > .image > i {	color: white !important;}.box > .icon > .info {	margin-top: -24px;	background: rgba[0, 0, 0, 0.04];	border: 1px solid #e0e0e0;	padding: 15px 0 10px 0;}.box > .icon:hover > .info {	background: rgba[0, 0, 0, 0.04];	border-color: #e0e0e0;	color: white;}.box > .icon > .info > h3.title {	font-family: "Quicksand", sans-serif !important;	font-size: 28px;	color: #222;	font-weight: 500;}.box > .icon > .info > p {	font-family: "Quicksand", sans-serif !important;	font-size: 15px;	color: #666;	line-height: 1.5em;	margin: 20px;}.box > .icon > .info > .more a {	font-family: "Quicksand", sans-serif !important;	font-size: 12px;	color: #222;	line-height: 12px;	text-transform: uppercase;	text-decoration: none;}.box > .icon:hover > .info > .more > a {	color: #fff;	padding: 6px 8px;	background-color: #63B76C;}.box .space {	height: 2px;	background-color: #6CB4C4;}.btn-default {	font-family: "Quicksand", sans-serif;	background-color: #75b1ae;	color: #FFFFFF;}.btn-default a:link {	text-decoration:none;	color:#000000;}.btn-default a:visited {	text-decoration:none;	color:#FFFFFF;}            

  Bước 3. Call library Bootstrap

  ________số 8

  Bước 4. Call library JQUERY