Font Awesome toggle mobiele weergave verschijnt soms...

[Borromini]

Ik gebruik Font Awesome voor (oa.) de touch button in de mobiele weergave. Als ik een desktopbrowser (Chromium, Firefox) naar mobiele weergave omschakel toont het icoontje gewoon (rechtsboven met donkergrijze transparante achtergrond). Als ik via een echt mobiel apparaat de website check, dan komt er zo'n rechthoekje te voorschijn met een kruisje in. Ik heb de CSS even nagekeken, en die wijst gewoon netjes naar het bars icon van Font Awesome (de waarde is f0c9). Alle CSS wordt geladen en de Font Awesome icons die op andere plekken gebruikt worden verschijnen gewoon. Ik gebruik hun recenste uitgave (5.0.6). Op mijn tablet zie ik het icoontje niet in Firefox en Opera, of Chrome; op m'n smartphone heb ik getest met Brave (die uiteindelijk ook gewoon de engine van Chrome gebruikt) en Firefox. Soms is het icoontje wel te zien, maar meestal niet. Ik krijg er kop noch staart aan

Website is *snip* spam. Screenshot:

[Voor 1% gewijzigd door RobIII op 21-02-2018 23:48]

[K-Jay]

Ik heb dat probleem ook gehad. Oplossing in mijn geval was het forceren van "www." in de .htaccess file:

code:

RewriteEngine On
    # force www
    #RewriteCond %{HTTP_HOST} !^www\.
    #RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

[Borromini]

@RobIII leg mij aub even uit waarom linken naar een website die ik in mekaar gestoken heb spam is? Denk je dat ik hier klanten kom ronselen voor de eigenaar? Ik ontwikkel zelf geen professionele websites... Is van een familielid.

@K-Jay Ik heb het net omgekeerd - de www. wordt altijd doorgestuurd naar de non-www variant. Hoe interfereert die rewrite dan? Het vreemde blijft dat de andere icons gewoon laden. Ik zie ook geen foutmeldingen in de debugger van bv. Chrome of Firefox.

[Voor 30% gewijzigd door Borromini op 22-02-2018 00:07]

[RobIII]

Borromini schreef op donderdag 22 februari 2018 @ 00:05:
@RobIII leg mij aub even uit waarom linken naar een website die ik in mekaar gestoken heb spam is? Denk je dat ik hier klanten kom ronselen voor de eigenaar? Ik ontwikkel zelf geen professionele websites... Is van een familielid.

Is allemaal totaal irrelevant; linken naar websites staan we gewoon niet toe, end of story. Of dat nou voor of van jezelf is of familie of wie dan ook. Tenzij er erg goede gegronde redenen zijn om te linken naar de site is het gewoon niet toegestaan. Die regel geldt niet alleen voor jou maar voor iedereen Ik heb heus niet de pik op je

Verder is het onhandig je topic met deze discussie te vervuilen; als je dit verder wil bespreken kun je dat beter doen in Schop een Modje (zoals ik je ook verteld heb in Borromini in "Link site als 'spam' uit topic over CSS-probleem gelicht?")

[Voor 15% gewijzigd door RobIII op 22-02-2018 00:47]

[Tsunami]

Het lijkt er op dat je de Font Awesome CSS naar je main.css hebt gekopieerd voor de header toggle, in plaats van gewoon een <i> of <span> met de juiste classes te gebruiken, zoals op alle andere plekken.

[DJMaze]

Borromini schreef op woensdag 21 februari 2018 @ 23:17:
Als ik via een echt mobiel apparaat de website check, dan komt er zo'n rechthoekje te voorschijn met een kruisje in. Ik heb de CSS even nagekeken, en die wijst gewoon netjes naar het bars icon van Font Awesome

Ach ik krijg

uBlock Origin has prevented the following page from loading:

https://fontawesome.com/icons/bars?style=solid

Because of the following filter

||fontawesome.com^

En op mijn mobiel staan fonts ook geblokkeerd. Ik ben zuinig op mijn 4G data
Je kan ook gewoon een pure css hamburger menu icon maken of de trigram for heaven zonder Font Awesome.

Ik blokkeer fonts ook express i.v.m. development.
Soms ziet dat er leuk uit

[Voor 29% gewijzigd door DJMaze op 22-02-2018 01:23]

[kaassouffle]

Heb iets vergelijkbaars gehad met Firefox die moeilijk deed. Destijds opgelost door Fontawesome CSS bestand in root te zetten ipv in een /css map. Tip vond ik toen via Stackoverflow.

[Borromini]

Bedankt voor alle suggesties.

@DJMaze De CSS hamburger ziet er heel interessant uit maar ik kan momenteel niet vinden hoe ik de transparant grijze achtergrond van het 'icoontje' daarmee behoud (en dat is handig voor de zichtbaarheid). Ik heb nu het 'Trigram for heaven' gebruikt met Source Sans Pro, dat ook met mijn eigen CSS ingeladen wordt (net zoals FontAwesome...), maar op de echte mobiele apparaten toont het opnieuw niet. Ik heb het ook met DejaVu Sans geprobeerd (een font dat op de meeste Androids wel voorgeïnstalleerd staat denk ik?), maar dan laadt het op een mobiel apparaat evenmin. Dus het lijkt 'structureler' te zijn dan FontAwesome.

Ik heb ook geprobeerd om het font te laten preloaden. Dan krijg ik in de console alleen maar de melding dat het niet gebruikt wordt en dat ik het misschien toch niet moet laden...

@kaassouffle Het pad klopt, en de andere icoontjes die door FontAwesome geleverd worden zijn gewoon te zien. Ik vermoed dat het iets met die header te maken heeft.

[maus]

De 'fout' zit hem erin dat je in je 'main.css' op de plek waar je de icoontjes wilt gebruiken 'FontAwesome' als lettertype hebt ingesteld:

code:

#headerToggle .toggle:before {
font-family: FontAwesome;
}

Dit terwijl je font awesome inlaadt in 'fontawesome-all.css' als 'Font Awesome\ 5 Free':

code:

@font-face {
    font-family: Font Awesome\ 5 Free;
}

Je browser gaat dus op zoek naar het letterlijke lettertype 'FontAwesome', maar komt enkel 'Font Awesome\ 5 Free' tegen en ziet dat niet als match. Hierdoor wordt je hele font nooit aangeroepen en wordt het icoon dus ook niet geladen.
De reden dat je het wel ziet op je desktop is dat je waarschijnlijk hier het lettertype als systeemlettertype hebt geïnstalleerd. Je browser zoekt dan naar het 'FontAwesome' lettertype, ziet dat het op je computer staat geïnstalleerd, en voila het icoon wordt vanuit daar ingeladen.

Oplossing is dus om de namen van de fonts matchend te krijgen. Ofwel door het in je main.css aan te passen, ofwel in je fontawesome-all.css.

[Tsunami]

Zoals ik al zei, gooi de Font Awesome CSS uit je main.css en gebruik gewoon een <i> of <span> met de juiste classes, dan werkt het prima.

[Borromini]

@maus Bedankt, het zat 'm inderdaad daar. Ik had de CSS van hun CDN gebruikt en die gebruikt blijkbaar 'Font Awesome\ 5' ipv 'Font Awesome 5'

@Tsunami De ontwikkelaars raden aan het zo te doen voor pseudo-elementen.

[Ramon]

In plaats van het Font Awesome-font kan je ook de SVG's vinden, hier: https://github.com/enchar...master/black/svg/bars.svg. Vind ik persoonlijk een stuk fijner dan fonts als icoontjes gebruiken.

Daarnaast kan je misschien ook eens kijken naar remote debugging van je telefoon. Dan kan je je lokale browser dev tools gebruiken en had je dit ws. gewoon ergens in de console kunnen terug vinden.

[kaassouffle]

FontAwesome heeft trouwens ook SVG framework (icm javascript) - https://fontawesome.com/how-to-use/svg-with-js

[Tsunami]

Borromini schreef op vrijdag 23 februari 2018 @ 19:31:
@Tsunami De ontwikkelaars raden aan het zo te doen voor pseudo-elementen.

Maar dat is dus alleen nodig als je geen controle hebt over de HTML.

[Borromini]

Daar had ik overgekeken Momenteel ben ik al heel blij dat het terug werkt. CSS/HTML heeft duidelijk nog veel geheimen voor mij .

[DJMaze]

Borromini schreef op donderdag 22 februari 2018 @ 23:12:
De CSS hamburger ziet er heel interessant uit maar ik kan momenteel niet vinden hoe ik de transparant grijze achtergrond van het 'icoontje' daarmee behoud (en dat is handig voor de zichtbaarheid).

Dat is niet moeilijk als je CSS beheerst.

Cascading Stylesheet:

background-color: rgba(0,0,0,0.5);

Borromini schreef op donderdag 22 februari 2018 @ 23:12:
Ik heb nu het 'Trigram for heaven' gebruikt met Source Sans Pro, maar op de echte mobiele apparaten toont het opnieuw niet.

Oude android versies?
Op mijn Android 6 apparaat in Firefox en Firefox Focus werkt het namelijk.
Op mijn Android 4 apparaat werkt het niet.

[Borromini]

Nee allemaal Android 7.