CSS 天气图标作为文本旁边的字体

Question

所以我并不真正喜欢编码，但我试图了解一切是如何运作的。 我在 .php 文件中给出了所有内容，我想优化以下脚本，以便我可以用作图标/字体。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
//Hier DS18B20 ID eintragen:
$temp = exec('cat /sys/bus/w1/devices/28-00000629745a/w1_slave |grep t=');
$temp = explode('t=',$temp);
$temp = $temp[1] / 1000;
$temp = round($temp,1);
echo "data: $temp&#x00B0; Celsius ICON_HERE \n\n";
ob_flush(); ?>

“weather-icons.css”看起来像这样：

@font-face {
  font-family: 'weather';
  src: url('../font/weathericons-regular-webfont.eot');
  src: url('../font/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/weathericons-regular-webfont.woff') format('woff'), url('../font/weathericons-regular-webfont.ttf') format('truetype'), url('../font/weathericons-regular-webfont.svg#weathericons-regular-webfontRg') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="wi-"],
[class*=" wi-"] {
  font-family: weather;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
[class^="wi-"]:before,
[class*=" wi-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}
.wi-day-cloudy-gusts:before {
  content: "\f000";
}

我怎样才能把.wi-day-cloudy-gusts:before {content: "\f000";"} 并将其放在我的文字旁边？

你看到并明白我的问题了吗？

我可以这样做，还是朝那个方向：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
//Hier DS18B20 ID eintragen:
$temp = exec('cat /sys/bus/w1/devices/28-00000629745a/w1_slave |grep t=');
$temp = explode('t=',$temp);
$temp = $temp[1] / 1000;
$temp = round($temp,1);
echo "data: $temp&#x00B0; Celsius <div content="\f000"></div> \n\n";
ob_flush(); 
?>

我很困惑，不知道如何将字体作为文本处理，因为它是一种样式。

Answer 1

Currently looking like this when i add the HTML Tag... its not there anymore

Thats the Structure in my folder....

我猜我的代码不知道他应该去哪里

<i class="wi wi-day-cloudy-gusts"></i>

班级来自。

我是否必须将任何 .css 文件放入与 temperature.php 相同的文件夹中？

我想放在那里的符号是字体，据我了解，不是吗？

感谢您迄今为止的帮助，迈克！

对不起我的语言，我来自德国，英语不是我的母语。

编辑 1： 我的新 Temperature.php 包括 weather-icons.css 内容。在底部你可以看到小温度部分。

 /*!
 *  Weather Icons Beta 1
 *  Weather themed icons for Bootstrap
 *  ------------------------------------------------------------------------------
  * Maintained at http://erikflowers.github.io/weather-icons
 *  http://twitter.com/Erik_UX
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - Fpmt licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL
 *  - CSS and LESS are licensed under MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - Documentation licensed under CC BY 3.0 -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Inspired by and works great as a companion with Font Aweosme
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
 *
 *  Weather Icons Bootstrap Package Author - Erik Flowers - erik@helloerik.com
 *  Weather Icons gives full credit for inspiration to Font Awesome and makes no 
 *  claim to invention, intellectual property, or ownership of methodology. 
 * 
 *  Support Open Source!
 *
 *  ------------------------------------------------------------------------------
 *  Email: erik@helloerik.com
 *  Twitter: http://twitter.com/Erik_UX
 */
@font-face {
  font-family: 'weather';
  src: url('../font/weathericons-regular-webfont.eot');
  src: url('../font/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/weathericons-regular-webfont.woff') format('woff'), url('../font/weathericons-regular-webfont.ttf') format('truetype'), url('../font/weathericons-regular-webfont.svg#weathericons-regular-webfontRg') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="wi-"],
[class*=" wi-"] {
  font-family: weather;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
[class^="wi-"]:before,
[class*=" wi-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}
.wi-day-cloudy-gusts:before {
  content: "\f000";
}
.wi-day-cloudy-windy:before {
  content: "\f001";
}
.wi-day-cloudy:before {
  content: "\f002";
}
.wi-day-fog:before {
  content: "\f003";
}
.wi-day-hail:before {
  content: "\f004";
}
.wi-day-lightning:before {
  content: "\f005";
}
.wi-day-rain-mix:before {
  content: "\f006";
}
.wi-day-rain-wind:before {
  content: "\f007";
}
.wi-day-rain:before {
  content: "\f008";
}
.wi-day-showers:before {
  content: "\f009";
}
.wi-day-snow:before {
  content: "\f00a";
}
.wi-day-sprinkle:before {
  content: "\f00b";
}
.wi-day-sunny-overcast:before {
  content: "\f00c";
}
.wi-day-sunny:before {
  content: "\f00d";
}
.wi-day-storm-showers:before {
  content: "\f00e";
}
.wi-day-thunderstorm:before {
  content: "\f010";
}
.wi-cloudy-gusts:before {
  content: "\f011";
}
.wi-cloudy-windy:before {
  content: "\f012";
}
.wi-cloudy:before {
  content: "\f013";
}
.wi-fog:before {
  content: "\f014";
}
.wi-hail:before {
  content: "\f015";
}
.wi-lightning:before {
  content: "\f016";
}
.wi-rain-mix:before {
  content: "\f017";
}
.wi-rain-wind:before {
  content: "\f018";
}
.wi-rain:before {
  content: "\f019";
}
.wi-showers:before {
  content: "\f01a";
}
.wi-snow:before {
  content: "\f01b";
}
.wi-sprinkle:before {
  content: "\f01c";
}
.wi-storm-showers:before {
  content: "\f01d";
}
.wi-thunderstorm:before {
  content: "\f01e";
}
.wi-windy:before {
  content: "\f021";
}
.wi-night-alt-cloudy-gusts:before {
  content: "\f022";
}
.wi-night-alt-cloudy-windy:before {
  content: "\f023";
}
.wi-night-alt-hail:before {
  content: "\f024";
}
.wi-night-alt-lightning:before {
  content: "\f025";
}
.wi-night-alt-rain-mix:before {
  content: "\f026";
}
.wi-night-alt-rain-wind:before {
  content: "\f027";
}
.wi-night-alt-rain:before {
  content: "\f028";
}
.wi-night-alt-showers:before {
  content: "\f029";
}
.wi-night-alt-snow:before {
  content: "\f02a";
}
.wi-night-alt-sprinkle:before {
  content: "\f02b";
}
.wi-night-alt-storm-showers:before {
  content: "\f02c";
}
.wi-night-alt-thunderstorm:before {
  content: "\f02d";
}
.wi-night-clear:before {
  content: "\f02e";
}
.wi-night-cloudy-gusts:before {
  content: "\f02f";
}
.wi-night-cloudy-windy:before {
  content: "\f030";
}
.wi-night-cloudy:before {
  content: "\f031";
}
.wi-night-hail:before {
  content: "\f032";
}
.wi-night-lightning:before {
  content: "\f033";
}
.wi-night-rain-mix:before {
  content: "\f034";
}
.wi-night-rain-wind:before {
  content: "\f035";
}
.wi-night-rain:before {
  content: "\f036";
}
.wi-night-showers:before {
  content: "\f037";
}
.wi-night-snow:before {
  content: "\f038";
}
.wi-night-sprinkle:before {
  content: "\f039";
}
.wi-night-storm-showers:before {
  content: "\f03a";
}
.wi-night-thunderstorm:before {
  content: "\f03b";
}
.wi-celcius:before {
  content: "\f03c";
}
.wi-cloud-down:before {
  content: "\f03d";
}
.wi-cloud-refresh:before {
  content: "\f03e";
}
.wi-cloud-up:before {
  content: "\f040";
}
.wi-cloud:before {
  content: "\f041";
}
.wi-degrees:before {
  content: "\f042";
}
.wi-down-left:before {
  content: "\f043";
}
.wi-down:before {
  content: "\f044";
}
.wi-fahrenheit:before {
  content: "\f045";
}
.wi-horizon-alt:before {
  content: "\f046";
}
.wi-horizon:before {
  content: "\f047";
}
.wi-left:before {
  content: "\f048";
}
.wi-lightning:before {
  content: "\f016";
}
.wi-night-fog:before {
  content: "\f04a";
}
.wi-refresh-alt:before {
  content: "\f04b";
}
.wi-refresh:before {
  content: "\f04c";
}
.wi-right:before {
  content: "\f04d";
}
.wi-sprinkles:before {
  content: "\f04e";
}
.wi-strong-wind:before {
  content: "\f050";
}
.wi-sunrise:before {
  content: "\f051";
}
.wi-sunset:before {
  content: "\f052";
}
.wi-thermometer-exterior:before {
  content: "\f053";
}
.wi-thermometer-internal:before {
  content: "\f054";
}
.wi-thermometer:before {
  content: "\f055";
}
.wi-tornado:before {
  content: "\f056";
}
.wi-up-right:before {
  content: "\f057";
}
.wi-up:before {
  content: "\f058";
}
.wi-wind-east:before {
  content: "\f059";
}
.wi-wind-north-east:before {
  content: "\f05a";
}
.wi-wind-north-west:before {
  content: "\f05b";
}
.wi-wind-north:before {
  content: "\f05c";
}
.wi-wind-south-east:before {
  content: "\f05d";
}
.wi-wind-south-west:before {
  content: "\f05e";
}
.wi-wind-south:before {
  content: "\f060";
}
.wi-wind-west:before {
  content: "\f061";
}


<?php
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    //Hier DS18B20 ID eintragen:
    $temp = exec('cat /sys/bus/w1/devices/28-00000629745a/w1_slave |grep t=');
    $temp = explode('t=',$temp);
    $temp = $temp[1] / 1000;
    $temp = round($temp,1);
    echo "data: $temp&#x00B0; Celsius <i class="wi-thermometer-exterior"></i>\n\n";
    ob_flush(); 
?>

Answer 2

将 HTML 标记附加到您的文本中。例如：<i class="wi wi-day-cloudy-gusts"></i>

echo 'data: $temp&#x00B0; Celsius <i class="wi wi-day-cloudy-gusts"></i>\n\n';

使用风图标时，需要包含 2 个 CSS 文件（首先是 weather-icons.css，然后是 weather-icons-wind.css）。

这是一个例子：https://jsfiddle.net/fznsjcbq/1/