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

时间:2016-04-19 22:35:01

标签: css fonts weather

enter image description here

所以我不是真正想要编码,但我试图了解一切是如何运作的。 我有.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(); 
?>

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

2 个答案:

答案 0 :(得分:0)

在文本中附加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/

答案 1 :(得分:0)

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文件放入同一文件夹中,例如我的温度.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(); 
?>