Danh Mục Bài Viết
Ok anh em, Tiếp theo trong chuỗi bài viết liên quan đến học nhanh Css cùng Minacode. Bài viết này mình sẽ giới thiệu qua về khái niệm Icons, một số thư viện cung cấp Icons miễn phí cũng như cách để chúng ta sử dụng nó. Nào Let's Go thôi!
Các bạn có thể thêm các Icons dễ dàng vào trang Html của bạn bằng cách sử dụng các thư viện như Font Awesome, Bootstrap hay như của Google. Tất cả các Icons trong thư viện trên hầu hết đều là ở dạng vectơ nên bạn có thể tùy chỉnh kích thước hay màu sắc bằng CSS như một thẻ Html bình thường nhé!
Để sử dụng các biểu tượng Font Awesome, hãy thêm dòng sau vào bên trong <head>phần trang HTML của bạn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>Lưu ý: Không cần tải xuống hoặc cài đặt!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
</head>
<body>
<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>
</body>
</html>Ta có:
Để sử dụng các biểu tượng Bootstrap, hãy thêm dòng sau vào bên trong <head>phần trang HTML của bạn:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Lưu ý: Không cần tải xuống hoặc cài đặt!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<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>
</body>
</html>Ta có:
Để sử dụng các biểu tượng Google, hãy thêm dòng sau vào bên trong <head>phần trang HTML của bạn:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">Lưu ý: Không cần tải xuống hoặc cài đặt!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>Ta có:
Ngoài ra hiện có rất nhiều thư viện miễn phí cung cấp icons rất đẹp và đa dạng nên các bạn nhớ tham khảo thêm nhé!
>>Còn tiếp>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
