CSS weather-icons as font next to a text -
so i'm not coding, im trying understand how works. have given in .php file , want optimize following script, can use icon/font.
<?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(); ?> the "weather-icons.css" looks this:
@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"; } how can put .wi-day-cloudy-gusts:before {content: "\f000";"} , put next text?
do see , problem?
can this, or in direction:
<?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(); ?> i'm confused , don't know how handle font text since style.
currently looking when add html tag... not there anymore
i guess code doesnt know should take
<i class="wi wi-day-cloudy-gusts"></i> class from.
do have put .css file same folder temperature.php is?
the symbol want put there font, far i've understood this, isn't it?
thank far, mike!
sorry language, im germany, , english isn't mother-tongue.
edit 1: new temperature.php including weather-icons.css content. @ bottom can see little temperature part.
/*! * weather icons beta 1 * weather themed icons bootstrap * ------------------------------------------------------------------------------ * maintained @ 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 , less licensed under mit license - * http://opensource.org/licenses/mit-license.html * - documentation licensed under cc 3.0 - * http://creativecommons.org/licenses/by/3.0/ * - inspired , works great companion font aweosme * "font awesome dave gandy - http://fontawesome.io" * * weather icons bootstrap package author - erik flowers - erik@helloerik.com * weather icons gives full credit inspiration font awesome , makes no * claim 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(); ?> 
Comments
Post a Comment