Biểu tượng mã html

Biểu tượng không chỉ giúp biểu đạt cảm xúc rõ ràng khi nhắn tin mà còn giúp trang Web trở nên sinh động hơn, tạo thiện cảm cho người xem. Trong lập trình Web, các lập trình viên cũng thường chèn biểu tượng vào trang Web để trang trí. Cách nhanh nhất để chèn đó là tận dụng các biểu tượng thư viện. Trong phần Biểu tượng trong các thư viện này rất đa dạng, phong phú, hình ảnh khá bắt mắt với nhiều chủng loại, kích thước, màu sắc khác nhau



Để chèn được icon vào trang web thì trong phần , bạn cần thêm dòng sau: 

1. Chèn icon của Font Awesome

Ví dụ.  




   



   
   
   
   
   


Kết quả.  

2. Chèn icon của Bootstrap

Ví dụ




     


     
     
     
     
     

Kết quả.  


3. Chèn biểu tượng của Google

Ví dụ.

______3


Kết quả.  

Lời kết. Việc chèn icon rất đơn giản, chỉ cần khai báo thư viện là xong, không cần tải hay cài đặt gì cả. Cách làm thì đơn giản nhưng lại khiến cho trang web trở nên sinh động hơn rất nhiều, gây thiện cảm cho người hơn rất nhiều

Cách đơn giản nhất để thêm icon [biểu tượng] vào trang HTML là dùng thư viện biểu tượng. như Font Awesome, chỉ cần thêm tên của lớp icon đó vào bất kì phần tử HTML nội dòng nào [như hay ]. Tất cả những icon trong thư viện icon dưới đây đều thuộc dạng vector có thể phóng to [scale] trong CSS [kích thước, màu sắc, bóng…]

Biểu tượng phông chữ tuyệt vời

Để dùng icon của Font Awesome, thêm dòng dưới đây vào phần trong trang HTML. Bạn không cần phải tải hay cài đặt gì cả.

VÍ dụ icon bằng Font Awesome
















Hình ảnh các biểu tượng trong ví dụ trên trình duyệt

Biểu tượng Bootstrap

Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần trong trang HTML. Cách này cũng không cần tải hay cài đặt gì.

Ví dụ icon bằng Bootstrap
















Bootstrap là lựa chọn khá phổ biến để lấy biểu tượng cho trang HTML

Biểu tượng Google

Để sử dụng Biểu tượng Google, hãy thêm dòng dưới đây vào phần




   



   
   
   
   
   


0 trong trang HTML. Cũng như 2 cách trên, bạn không cần tải hay cài đặt gì cả

________số 8

Ví dụ Biểu tượng Google








cloud
favorite
attachment
computer
traffic



Google cũng có biểu tượng thư viện riêng cho nhà phát triển

Bài trước. Phông chữ trong CSS

bài sau. Path in CSS

Thứ Sáu, 10/05/2019 10. 33

3,723 👨 49. 088

#CSS

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

  • HTC có giá cao hơn Nokia và RIM
  • Laptop chơi game dùng loa "hàng hiệu" của MSI
  • Dùng WeChat có đồng ý với "đường lông bò"?
  • iPad can be used screen lai E-ink
  • Cách tải và cài đặt PUBG LITE trên máy tính
  • Cách sử dụng AnyDesk Remote điều khiển máy tính từ xa bằng điện thoại

CSS và CSS3

  • Bộ chọn Lớp trong CSS
  • Tìm hiểu sâu về Color trong CSS
  • Hiệu ứng chuyển đổi Chuyển đổi trong CSS
  • Một số thuộc tính xử lý văn bản trong CSS
  • Tạo Button trong CSS
  • Thư viện hình ảnh trong CSS
Xem thêm

CSS và CSS3

  • CSS cơ bản
    • CSS giới thiệu
    • Cú pháp và Selector CSS
    • Vị trí đặt CSS
    • CSS - Màu
    • CSS - Nền
    • CSS - Đường viền
    • CSS - Ký quỹ
    • CSS - Đệm
    • CSS - Chiều rộng và Chiều cao
    • CSS - Mô hình hộp
    • CSS - Phác thảo
    • CSS - Văn bản
    • CSS - Phông chữ
    • CSS - Biểu tượng
    • CSS - Liên kết
    • CSS - Tạo danh sách
    • CSS - Bảng
    • CSS - Hiển thị
    • CSS - Chiều rộng tối đa
    • CSS - Vị trí
    • CSS - tràn
    • CSS - Float và Clear
    • CSS - Khối nội tuyến
    • CSS - Căn chỉnh
    • CSS - Trình kết hợp
    • CSS - Lớp giả
    • CSS - Phần tử giả
    • CSS - Độ mờ
    • CSS - Thanh điều hướng
    • CSS - Trình đơn thả xuống
    • CSS - Thư viện hình ảnh
    • CSS - Sprite hình ảnh
    • CSS - Bộ chọn thuộc tính
    • CSS - Biểu mẫu
    • CSS - Bộ đếm
    • CSS - Bố cục
    • CSS - Đơn vị
    • CSS - Tính đặc hiệu
  • nâng cao CSS
    • CSS - Góc bo tròn
    • CSS - Hình ảnh đường viền
    • CSS - Nhiều nền
    • CSS - Màu
    • CSS - Chuyển màu
    • CSS - Hiệu ứng đổ bóng
    • CSS - Hiệu ứng văn bản
    • CSS - Phông chữ Web
    • CSS - Chuyển đổi 2D
    • CSS - Chuyển đổi 3D
    • CSS - Chuyển tiếp
    • CSS - Hoạt hình
    • CSS - Chú giải công cụ
    • CSS - Flexbox
    • CSS - Nút
    • CSS- @media
    • Tạo hiệu ứng hover node bằng CSS

  • công nghệ
    • Ứng dụng
    • hệ thống
    • Game - Trò chơi
    • điện thoại Iphone
    • Android
    • Linux
    • Nền web
    • Đồng hồ thông minh
    • Chụp ảnh - Quay phim
    • hệ điều hành Mac
    • Phần cứng
    • SEO thủ thuật
    • base format
    • quả mâm xôi
    • Dịch vụ ngân hàng
    • Lập trình
    • Online service
    • Dịch vụ nhà mạng
    • Nhà thông minh
  • Tải xuống
    • Ứng dụng văn phòng
    • Tải game
    • Hệ thống tiện ích
    • Ảnh, đồ họa
    • Internet
    • Bảo mật, Antivirus
    • Họp, học trực tuyến
    • Video, phim, nhạc
    • Thư
    • Lưu trữ đám mây
    • Giao tiếp, liên lạc, hẹn hò
    • Support for learning
    • Máy ảo
  • Tiện ích
  • Khoa học
    • Khoa học vui
    • Khám phá khoa học
    • Bí ẩn - Chuyện lạ
    • Chăm sóc sức khỏe
    • Khoa học Vũ trụ
    • Khám phá thiên nhiên
  • Điện máy
    • tủ lạnh
    • tivi
    • Điều hòa
    • Máy giặt
  • Cuộc sống
    • Kỹ năng
    • Món ngon mỗi ngày
    • làm đẹp
    • nuôi dạy con
    • Chăm sóc nhà cửa
    • Kinh nghiệm Du lịch
    • Halloween
    • mẹo vặt
    • giáng sinh - noel
    • tết 2023
    • quà tặng
    • Giải trí
    • Là gì?
    • nhà đẹp
    • ĐỨNG ĐẦU
    • phong thuỷ
  • Video
    • công nghệ
    • Phòng thí nghiệm của Cisco
    • Phòng thí nghiệm của Microsoft
    • Video Khoa học
  • Ô tô, Xe máy
    • Giấy phép lái xe
  • Làng công nghệ
    • Tấn công mạng
    • Công nghệ
    • new technology
    • Trí tuệ nhân tạo [AI]
    • Anh tài công nghệ
    • Bình luận công nghệ
    • Tổng hợp
  • Học CNTT
    • quiz technology
    • Microsoft Word 2016
    • Microsoft Word 2013
    • Word 2007
    • Excel 2019
    • Excel 2016
    • Hàm excel
    • Microsoft PowerPoint 2019
    • Microsoft PowerPoint 2016
    • Google Trang tính - Trang tính
    • photoshop CS6
    • photoshop CS5
    • HTML
    • CSS và CSS3
    • con trăn
    • Học SQL
    • Lập trình C
    • Lập trình C++
    • Lập trình C#
    • Học HTTP
    • Bootstrap
    • Máy chủ SQL
    • JavaScript
    • Học PHP
    • jQuery
    • Học MongoDB
    • Unix/Linux
    • Học Git
    • NodeJS

Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm

Bản quyền © 2003-2022 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được cấp phép

Chủ Đề