jquery - 一些 Font Awesome 图标显示，一些不显示

问题描述

我通过 POST 和 AJAX 使用 ExpressJS 访问 OpenWeather API，只是为了比较这两种方法。

在所有事情中（所有 JS 工作），我遇到了字体真棒问题。有些显示，有些不显示。

我已经尝试了将 i 标签单独放置在所有各种元素中的所有方法。结果不一致。

无论如何，这里是标记：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> // this is the FA link

<input id="getIt" name="cityajax" type="text" class="ghost-input" placeholder="Enter a City" required>
<button id="submit">Submit</button>
     <div class="textAlignCenter">
         <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
     </div>
     <div id="message"></div><span id="displaySky"> </span> // the icon here shows, but only after the class is added via jQuery

     <div class="wrapper">
       <div>
         <span class="humidLogo"></span> <i class="far fa-humidity" ></i> Current humidity:   <span class="apiHumidity"> % </span> // this icon does not show

     </div>

     <div>
       <span class="windLogo"></span> <i class="fas fa-windsock"></i>  Wind speed is:   <span class="apiWind"> km/h </span> //this icon does not show either

   </div>
     </div>

相关的CSS在这里，请不要lauch，这是我尝试过的:-)

    .fa {
            color:violet;

        }
        .fas, .far {
            color:violet;

        }
        #displaySky {
          display: block;
          width:100%;
          margin: 20px auto;
          margin-bottom: 35px;
          text-align: center;
          color:violet;
          font-size:1.3em;
        }

        #message {
          display: block;
          width:100%;
          margin: 20px auto;
          text-align: center;
          color:black;
        }


        i {
          color: violet; font-size:2em !important;
        }
        .wrapper {
          margin:10px;
          border: grey 1px solid;
          padding: 30px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
        }

而JS，这应该没有任何影响，但有趣的是我添加图标类的那一行，该图标确实出现了，只需通过在输入字段中输入一个城市来运行ajax请求，你会看到，徽标被正确添加。

如果这个 JS 可以稍微优化一下，我会接受一些反馈，我曾尝试通过 EJS 根据天气显示不同的图标，但这太混乱了，变量没有跨文件范围，我更喜欢jQuery 方式。

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}  // ignore this


    $("#submit").click(function (e) {

var 目的地 = ($("#getIt").val());

            $.post("http://api.openweathermap.org/data/2.5/weather?q=" +
            destination +
            "&units=metric&appid=15c9456e587b8b790a9092494bdec5ff",
            function (result, status, xhr) {

                var APIresponded =  result["main"]["temp"];
                var APIweather =  result["weather"][0]["description"];
                var sunGoing = result["sys"]["sunset"];
                var output = destination.capitalize();
                var humidValue = result["main"]["humidity"];
                var windy = result["wind"]["speed"];
                if (APIweather.includes("snow")) {
                  $('#displaySky').addClass('far fa-snowflake');
                }
                if (APIweather.includes("rain")) {
                  $('#displaySky').addClass('fas fa-cloud-rain');
                }
                if (APIweather.includes("overcast")) {
                  $('#displaySky').addClass('fas fa-smog');
                }
                if (APIweather.includes("sun") || APIweather.includes("clear")) {
                  $('#displaySky').addClass('fas fa-sun');
                }
                if (APIweather.includes("scattered")) {
                  $('#displaySky').addClass('fas fa-cloud-sun'); // All these if clauses work and add the icons
                }
                $("#message").html("The temperature in " + output + " is : " + APIresponded + " degrees. The sky looks like this: ");
                $(".apiHumidity").text(humidValue + " %");
                $('.humidLogo').addClass('fas fa-humidity'); // not working
                $('.apiWind').html(windy + 'km per hour');
                console.log(APIweather);
            }

            ).fail(function (xhr, status, error) {
                alert("Result: " + status + " " + error + " " +
                xhr.status + " " + xhr.statusText);
            });
        });


    $(document).ajaxStart(function () {
        $("img").show(300);
    });

    $(document).ajaxStop(function () {
        $("img").hide(300);
    });

就是这样，我创建了一个codepen：

https://codepen.io/damPop/pen/qLgRvp?editors=1000

那么，为什么图标不显示呢？当我检查开发工具时，它们确实出现在 DOM 中，但大小为 0/0px。尝试添加 !important 规则，也没有用。我错过了什么？我已经阅读了关于 SO 的类似主题，但没有一个对此有帮助。我也不认为这是一个 flexbox 问题。

标签： jqueryhtmlcssfont-awesome-5

jquery - 一些 Font Awesome 图标显示，一些不显示

问题描述

解决方案

推荐阅读