所以我不是真正想要编码,但我试图了解一切是如何运作的。 我有.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° 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° Celsius <div content="\f000"></div> \n\n";
ob_flush();
?>
我很困惑,不知道如何将字体作为文本处理,因为它是一种风格。
答案 0 :(得分:0)
在文本中附加HTML标记。例如:<i class="wi wi-day-cloudy-gusts"></i>
echo 'data: $temp° 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° Celsius <i class="wi-thermometer-exterior"></i>\n\n";
ob_flush();
?>