Các thanh fa fa của tôi không hiển thị – Điều hướng hàng đầu đáp ứng – fa fa-bar không hoạt động

Bạn đang xem : fa fa-bar không hoạt động

Vì vậy, tôi đang chuyển đổi bánh răng một chút ở đây. Tôi đã tạo thanh điều hướng đáp ứng cho menu của mình, nhưng rất tiếc nó không hiển thị tiêu đề trong thanh menu khi nó ở dạng di động. Đối với bản cập nhật thanh điều hướng của tôi, tôi đã sao chép và dán các mã từ W3schools và sau đó sửa đổi nó một chút. Tôi định đổi màu sau.

Hiện tại, vấn đề duy nhất mà tôi gặp phải là thanh fa fa không hiển thị khi tôi chuyển sang chế độ phản hồi. Tại sao vậy? Đây là nơi tôi lấy thanh điều hướng đáp ứng từ đó. https://www.w3schools.com/howto/howto_js_topnav_responsive.asp .

Hãy cho tôi biết tôi đang thiếu gì. Cảm ơn. Bạn có thể chạy đoạn mã bên dưới để xem tôi đang nói gì.

  function myFunction () {
  var x = document.getElementById ("myTopnav");
  if (x.className === "topnav") {
    x.className + = "đáp ứng";
  } khác {
    x.className = "topnav";
  }
}  
  .topnav {
  tràn: ẩn;
  màu nền: # 333;
}

.topnav a {
  float: trái;
  hiển thị: khối;
  màu: # f2f2f2;
  text-align: center;
  đệm: 14px 16px;
  văn bản-trang trí: không có;
  font-size: 17px;
}

.topnav a: hover {
  màu nền: #ddd;
  màu đen;
}

.tích cực {
  màu nền: # 4CAF50;
  màu trắng;
}

.topnav .icon {
  không trưng bày;
}

@media screen and (max-width: 600px) {
  .topnav a: not (: first-child) {
    không trưng bày;
  }
  .topnav a.icon {
    float: phải;
    hiển thị: khối;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    chức vụ: thân nhân;
  }
  .topnav.responsive a.icon {
    vị trí: tuyệt đối;
    đúng: 0;
    đầu: 0;
  }
  .topnav.responsive a {
    float: không có;
    hiển thị: khối;
    text-align: left;
  }
}  
  & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
  & lt; title & gt; Trang chủ & lt; / title & gt;
  & lt; link rel = "stylesheet" type = "text / css" href = "main.css" & gt;
  & lt; script src = "script.js" & gt; & lt; / script & gt;
& lt; / head & gt;

& lt; body & gt;

  & lt;! - Menu điều hướng - & gt;

  & lt; div class = "topnav" id = "myTopnav" & gt;
    & lt; a href = "# home" class = "active" & gt; Home & lt; / a & gt;
    & lt; a href = "about.html" & gt; Giới thiệu về Tôi & lt; / a & gt;
    & lt; a href = "portfolio.html" & gt; Danh mục đầu tư & lt; / a & gt;
    & lt; a href = "contact.html" & gt; Liên hệ & lt; / a & gt;
    & lt; a href = "javascript: void (0);" class = "icon" onclick = "myFunction ()" & gt;
      & lt; i class = "fa fa-bar" & gt; & lt; / i & gt;
    & lt; / a & gt;
  & lt; / div & gt;

& lt; / body & gt;

& lt; / html & gt;  

ĐỂ TRẢ LỜI

Xem Thêm  Thẻ đầu trang và chân trang HTML5 - đầu trang và chân trang trong html

  function myFunction () {
  var x = document.getElementById ("myTopnav");
  if (x.className === "topnav") {
    x.className + = "đáp ứng";
  } khác {
    x.className = "topnav";
  }
}  
  .topnav {
  tràn: ẩn;
  màu nền: # 333;
}

.topnav a {
  float: trái;
  hiển thị: khối;
  màu: # f2f2f2;
  text-align: center;
  đệm: 14px 16px;
  văn bản-trang trí: không có;
  font-size: 17px;
}

.topnav a: hover {
  màu nền: #ddd;
  màu đen;
}

.tích cực {
  màu nền: # 4CAF50;
  màu trắng;
}

.topnav .icon {
  không trưng bày;
}

@media screen and (max-width: 600px) {
  .topnav a: not (: first-child) {
    không trưng bày;
  }
  .topnav a.icon {
    float: phải;
    hiển thị: khối;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    chức vụ: thân nhân;
  }
  .topnav.responsive a.icon {
    vị trí: tuyệt đối;
    đúng: 0;
    đầu: 0;
  }
  .topnav.responsive a {
    float: không có;
    hiển thị: khối;
    text-align: left;
  }
}


/ * Đây là phần làm rối loạn kiểu dáng của tôi cho trang chủ của tôi.
    mà trước đây tôi đã hài lòng với trước đây. * /

.bản tóm tắt {
  chiều cao tối thiểu: 75vh;
  chiều rộng tối đa: 2000px;
  hiển thị: flex;
  align-các mục: trung tâm;
  justify-content: trung tâm;
}

.ảnh đại diện {
  đệm: 2rem;
}

.profileSummary {
  chiều rộng tối đa: 400px;
}  
 & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
  & lt; title & gt; Trang chủ & lt; / title & gt;
  & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
  & lt; link rel = "stylesheet" type = "text / css" href = "main.css" & gt;
  & lt; script src = "script.js" & gt; & lt; / script & gt;
& lt; / head & gt;

& lt; body & gt;

  & lt; div class = "topnav" id = "myTopnav" & gt;
    & lt; a href = "# home" class = "active" & gt; Home & lt; / a & gt;
    & lt; a href = "about.html" & gt; Giới thiệu về Tôi & lt; / a & gt;
    & lt; a href = "portfolio.html" & gt; Danh mục đầu tư & lt; / a & gt;
    & lt; a href = "contact.html" & gt; Liên hệ & lt; / a & gt;
    & lt; a href = "javascript: void (0);" class = "icon" onclick = "myFunction ()" & gt;
      & lt; i class = "fa fa-bar" & gt; & lt; / i & gt;
    & lt; / a & gt;
  & lt; / div & gt;



  & lt; span & gt;
    & lt; div class = "tóm tắt" & gt;
      & lt; div class = "profilePicture" & gt;
        & lt; img src = "https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style = "width: 170px; height: 170px; border-radius: 50%;" & gt ;
      & lt; / div & gt;
      & lt; div class = "profileSummary" & gt;
        Chú ý, than ôi bởi vì sản lượng do đáng xấu hổ quá nhiều kookaburra không thể kiểm soát nổi một cách không thể kiềm chế quá dễ bị tổn thương leo lên một cách quý tộc được thuê con cáo thô lỗ cho biết do đó sò điệp khủng khiếp vô tội trên lòng tốt cầy mangut len ​​lỏi thể hiện một cách kiên quyết
        và.
      & lt; / div & gt;
    & lt; / div & gt;
  & lt; / span & gt;


& lt; / body & gt;

& lt; / html & gt;  


Xem Thêm  Python 3 cho vòng lặp - python 3 cho phạm vi vòng lặp

Xem thêm những thông tin liên quan đến chủ đề fa fa-bar không hoạt động

How To Show Or Hide The Windows Search Box Or Search Icon On Your Windows 10 PC Tutorial

  • Tác giả: ComputerSluggish Tutorials
  • Ngày đăng: 2020-02-06
  • Đánh giá: 4 ⭐ ( 4983 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How To Show Or Hide The Windows Search Box Or Search Icon On Your Windows 10 PC Tutorial

    In this Windows 10 tutorial I will be showing you how to show or hide the Windows search box or search icon on your PC. If you don’t want the search box on your Windows 10 taskbar, or you simply want to just show the search icon which is great if you like small icons, then you can easily hide it by following the steps in this tutorial. If you have accidentally removed the Windows search bar then it can easily be unhidden.

    Follow Me
    Website – http://computersluggish.com
    Facebook – @computersluggish
    Twitter – @computerslug
    Instagram – @computersluggishtutorials
    CS Plus YouTube: https://www.youtube.com/computersluggishplus

    This Windows tutorial will work with all Lenovo, HP, Dell, Acer, Asus, Samsung, Toshiba desktop computers and laptops using Windows 10 Home, Professional and Enterprise. If you have a Windows tutorial you would like me to look into doing, then please feel free to contact me.

    Windows10
    SearchBox
    Hide

fa-bars: Font Awesome Icons

  • Tác giả: fontawesome.com
  • Đánh giá: 4 ⭐ ( 9847 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Font Awesome, the iconic font and CSS framework

Bàn phím không hoạt động đúng sau khi rút hoặc tháo và sau đó kết nối lại

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 3153 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bàn phím bị ngắt kết nối khi một khóa được tổ chức (cố ý hoặc vô tình), khi bàn phím được kết nối lại, nó có thể không đáp ứng hoặc nó có thể hoạt động như nếu chính vẫn được giữ.

Cách khắc phục và khởi động lại Touch Bar khi nó ngừng hoạt động

  • Tác giả: fptshop.com.vn
  • Đánh giá: 5 ⭐ ( 1266 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Touch Bar trên MacBook Pro cung cấp nhiều phím tắt khác nhau theo từng ứng dụng, nhưng đôi khi nó không hoạt động như mong đợi. Người dùng cuối cùng có thể gặp các rắc rối không mong muốn với như đóng băng hoặc các nút cụ thể không phản hồi.

Cách khắc phục vấn đề Game Bar không hoạt động trên Windows 10

  • Tác giả: suamaytinhpci.com
  • Đánh giá: 3 ⭐ ( 8286 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách khắc phục vấn đề Game Bar không hoạt động trên Windows 10 ⭐_⭐_⭐ Chi Tiết tại Sửa Máy Tính – Máy In PCI ✅✅ Xem Ngay!

Quán bar, nhà hàng không được hoạt động quá 24 giờ hàng ngày

  • Tác giả: dantri.com.vn
  • Đánh giá: 5 ⭐ ( 9134 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: (Dân trí) – “Hội An sẽ chấn chỉnh hoạt động kinh doanh, kiên quyết xử lý dứt điểm tình trạng mất trật tự ở các cơ sở nhà hàng – bar trên địa bàn thành phố”.

Cách khắc phục vấn đề Game Bar không hoạt động trên Windows 10

  • Tác giả: suamaytinhtphcm.net
  • Đánh giá: 5 ⭐ ( 2108 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thêm và thay đổi màu nền trong HTML - thêm html màu nền