Question

我正在通过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在这里，请不要随意，这是我尝试过的：-）

    .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 destination =（$（“＃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问题。

Answer 1

fa-humidity和fa-windsock这些特定的图标仅在Font Awesome Pro许可证中可用。要解决此问题，您需要获得许可证，然后download Pro相关文件。

显示一些“真棒字体”图标，一些不显示

1 个答案: