Ủ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? Show Cách thêm biểu tượngCá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
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
You can see moreChuyển tiếp CSS Chuyển đổi CSS 3D Bảng CSS Hình ảnh đường viền CSS Lời kếtBà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. BootstrapBước 1. Tạo cấu trúc HTML
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ố 8Bước 4. Call library JQUERY
Bootstrap Xem (3487) Học thiết kế web Bước 1. Tạo cấu trúc HTML
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ố 8Bước 4. Call library JQUERY |