Chèn ảnh vào button html

     
Để cái đẹp hơn đến button cũng giống như để cho độc giả dễ hình dung hơn về chức năng của các button trên website fan ta thường chèn những icon hoặc hình ảnh vào. Cùng ở nội dung bài viết này mình vẫn hướng dẫn sản xuất button kèm icon khớp ứng với tính năng của button đó, với icon này mình vẫn dử dụng từ phông của awesome


Bạn đang xem: Chèn ảnh vào button html

*



Xem thêm: So Sánh Mô Hình Osi Và Tcp/Ip Internet Protocol Suite, So Sánh Mô Hình Osi Và Tcp/Ip

Font Awesome là gì ?

Đây là một trong những loại phông dạng hình hình ảnh có thể hiển thị tương tự như như chữ viết. Cùng nó tất cả những điểm mạnh như là: Hiển thị Icon một cách nhanh chóng đơn giản Có thể thay đổi kích thước, color vì nó là text không trở nên vỡ hình dù là phóng to từng nào Đặc biệt font Awesome sống phiên phiên bản miễn giá thành thôi cũng có tới rộng 1000 icon các loại, thuộc các chủ để khác nhau.Bạn hoàn toàn có thể thoải mái lựa chọn.

Đưa fonts Awesome vào blog/website

Bạn chỉ việc chèn đoạn code bên dưới vào vào thẻ

Tạo button kèm icon

Mình ví dụ dưới một button chạy thử DemoĐể hiển thị được button bên trên ta áp dụng code bên dưới chèn vào nơi mong muốn hiển thịDemoVà sử dụng CSS bên dưới cho button bên trên a.buttonhcv background-size: 300% 100%!important; background: linear-gradient(-225deg,#7742B2 0%,#F180FF 52%,#FD8BD9 100%); position: relative; display: inline-block; height: 45px; line-height: 45px; padding: 0 30px; font-size: 14px; color: #fff; text-align: center; text-decoration: none; border-radius: 5px; cursor: pointer; margin: 15px 10px; text-transform: uppercase; box-shadow: 4px 4px 15px rgba(0,0,0,0.1); font-weight: 500; a.buttonhcv:hover opacity: .8; color: #fff; transition: .3s; .buttonhcv:before font-family: "Font Awesome 5 Pro","Font Awesome 5 Brands"; font-weight: 900; display: inline-block; margin: 0 5px 0 0; margin-left: -30px; .buttonhcv.demohcv:before content: "f06e"; display: inline-block; margin-right: 30px; background: rgba(0,0,0,0.18); border-radius: 5px 0 0 5px; width: 45px; a.buttonhcv.demohcv background: linear-gradient(135deg,#ff4c2e 0%,#f9a82f 45%,#ff4c2e 77%,#f7352e 100%); so với 1 chút về đoạn CSS bên trên .buttonhcv: Hình dạng, màu sắc button mang định .buttonhcv:before: định hình cho nơi cất icon .demohcv:before: lấy icon tự kho icon của fonts awesome. Lấy ví dụ như icon con mắt như button trên có mã là f06e. Bằng hữu có thể rước mã này bên trên trang của Awesome .demohcv: color riêng mang lại button test Ví dụ ta vẫn thêm đoạn code sau vào CSS .buttonhcv.downloadhcv:before content: "f06e"; display: inline-block; margin-right: 30px; background: rgba(0,0,0,0.18); border-radius: 5px 0 0 5px; width: 45px; a.buttonhcv.downloadhcv background: linear-gradient(-225deg,#00a26d 0%,#02ffac 52%,#039c79 100%);Vào thực hiện đoạn code bên dưới để chèn vào nơi mong muốn hiển thị buttonDownloadTa vẫn đượcDownload Chốt lại cũng khá loằng ngoằng đối với những chúng ta mới gia nhập viết blog/website nhưng mà nếu có vướng mắc gì cứ nhằm lại comment bên dưới, thảnh thơi mình đang giúp
nhiều người đang xem bài viết "Thêm button gồm icon mang đến website sử dụng font awesome
" tại chăm mục: Blogspot , CSS , HTML , Website

Chuyên mục: Domain Hosting