Đổi icon trước thẻ tag <li> của <ul thành đấu check v xanh CSS HTML như thế nào?

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 21/7/22.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,044
    Đã được thích:
    81
    Điểm thành tích:
    48
    Chào mọi người, hiện tại mình đang sử dụng cái thẻ Li của UL thì mặc định nó là dấu chấm ở đằng trước.
    Giờ mình muốn đổi dấu chấm này thành dấu check v xanh giống như hình dưới cho tất cả các web thì làm như thế nào. Dễ dáng copy code đi web khác được ấy, vì nhiều bạn trên website chỉ, toàn dùng các icon từ fonts chữ, mình copy nó qua web khác thì không được.

    Có cái check nào bằng CSS vẽ ra được trước cái thẻ Li giống hình dưới không cho mình code với. Cảm ơn

    change-icon-ul-li-css-html.jpg
     
    Cảm ơn đã xem bài:

    Đổi icon trước thẻ tag <li> của <ul thành đấu check v xanh CSS HTML như thế nào?

  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,994
    Đã được thích:
    1,215
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Cái này a có cho em 1 lần rồi mà, chỉ là nó là cái icon trái tím ấy nhớ không? Để a cho em code icon trước thẻ li là check xanh nhé.

    Add code sau vào em nhé, nó sẽ ra y chang cái em cần
    HTML:
    ul
    {
      list-style: none;
    }
    ul li
    {
      position: relative;
      list-style: none;
    }
    ul li::before {
      content: '';
      display: block;
      width: 9px;
      height: 14px;
      top: 4px;
      left: -22px;
      border-radius: 0;
      opacity: 1;
      border-top-color: transparent;
      border-left-color: transparent;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-right: 3px solid #4ba0d8;
      border-bottom: 3px solid #4ba0d8;
      position: absolute;
      -webkit-transition: all .12s, border-color .08s;
      transition: all .12s, border-color .08s;
    }
    
     
    seolagi thích bài này.
  3. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,044
    Đã được thích:
    81
    Điểm thành tích:
    48
    Ngon quá anh ơi, đúng y chang cái em cần, mà tìm trên Google mãi không có ai chỉ hết hizzz, cảm ơn ad rất nhiều.
     
  4. kingdom
    Tham gia ngày:
    7/11/18
    Bài viết:
    15
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Mình cũng thường dùng cách trên. Nhưng cũng có hữu hạn đối với những icon khó.
    Bạn cũng có thể sử dụng hình ảnh được nhé bằng cách truyền vào đường dẫn hình ảnh qua thuộc tính "list-style-image". Hoặc sử dụng cách trên nhưng đặt background cho nó.
     
  5. contraixinh
    Tham gia ngày:
    26/2/23
    Bài viết:
    10
    Đã được thích:
    0
    Điểm thành tích:
    1
    bài viết hay, ý nghĩa thiết thực, ứng dụng thực tế, thanks thớt nhé!@#@$
     


Chủ để tương tự : Đổi icon
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc icon .svg trong background image css html, change svg color in background image 23/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào 20/1/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi màu sắc Placeholder CSS thẻ Input HTML 25/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi ngôn ngữ, Change Language Recaptcha Google nhứ thế nào 31/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap 13/8/18