Thêm button có icon cho website sử dụng font awesome

Chia sẻ:

26.6.20 | 0 nhận xét | lượt xem

Để làm đẹp hơn cho button cũng như để cho độc giả dễ hình dung hơn về chức năng của các button trên website người ta thường chèn các icon hoặc hình ảnh vào. Và ở bài viết này mình sẽ hướng dẫn tạo button kèm icon tương ứng với chức năng của button đó, và icon này mình sẽ dử dụng từ font của awesome

Font Awesome là gì ?

Đây là một loại font dạng hình ảnh có thể hiển thị tương tự như chữ viết. Và nó có những ưu điểm như là:

Hiển thị Icon một cách nhanh chóng đơn giản
Có thể thay đổi kích thước, màu sắc vì nó là text
Không bị vỡ hình dù có phóng to bao nhiêu
Đặc biệt Font Awesome ở phiên bản miễn phí thôi cũng có tới hơn 1000 icon các loại, thuộc nhiều chủ để khác nhau.Bạn có thể thoải mái lựa chọn.

Đưa font Awesome vào blog/website

Bạn chỉ cần chèn đoạn code bên dưới vào trong thẻ <head>

<link href='https://cdn.jsdelivr.net/gh/startinhit/font-awesome/css/all.css' rel='stylesheet'/>

Tạo button kèm icon

Mình ví dụ bên dưới một button Demo
Demo

Để hiển thị được button phía trên ta sử dụng code bên dưới chèn vào nơi muốn hiển thị

<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>

Và sử dụng CSS bên dưới cho button 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%);
}

Phân tích 1 chút về đoạn CSS bên trên

.buttonhcv: Hình dạng, màu sắc button mặc định
.buttonhcv:before: định hình cho nơi chứa icon
.demohcv:before: Lấy icon từ kho icon của font awesome. Ví dụ icon con mắt như button bên trên có mã là f06e. Anh em có thể lấy mã này trên trang của Awesome
.demohcv: Màu sắc riêng cho button demo

Ví dụ ta sẽ 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 sử dụng đoạn code bên dưới để chèn vào nơi muốn hiển thị button

<a class="buttonhcv downloadhcv" href="link button" rel="nofollow" target="_blank">Download</a>

Ta sẽ được
Download

Chốt lại cũng hơi loằng ngoằng đối với những bạn mới tham gia viết blog/website nhưng nếu có thắc mắc gì cứ để lại comment bên dưới, rảnh mình sẽ giúp