Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

Font Awesome toggle mobiele weergave verschijnt soms...

Pagina: 1
Acties:

Vraag


  • Borromini
  • Registratie: januari 2003
  • Niet online

Borromini

Mislukt misantroop

Topicstarter
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 8)7

Website is *snip* spam. Screenshot:

RobIII wijzigde deze reactie 21-02-2018 23:48 (1%)

Got Leenucks? | Debian Buster x86_64 / ARM | OpenWrt: Empower your router | Blogje

Beste antwoord (via Borromini op 23-02-2018 19:31)


  • maus
  • Registratie: november 2011
  • Laatst online: 17:00

maus

~ 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:
1
2
3
#headerToggle .toggle:before {
font-family: FontAwesome;
}

Dit terwijl je font awesome inlaadt in 'fontawesome-all.css' als 'Font Awesome\ 5 Free':
code:
1
2
3
@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.

Alle reacties


  • K-Jay
  • Registratie: augustus 2001
  • Laatst online: 07:08

K-Jay

Klaas Jan

Ik heb dat probleem ook gehad. Oplossing in mijn geval was het forceren van "www." in de .htaccess file:
code:
1
2
3
4
RewriteEngine On
    # force www
    #RewriteCond %{HTTP_HOST} !^www\.
    #RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Beter remmen=sneller racen: loadcellmod


  • Borromini
  • Registratie: januari 2003
  • Niet online

Borromini

Mislukt misantroop

Topicstarter
@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.

Borromini wijzigde deze reactie 22-02-2018 00:07 (30%)

Got Leenucks? | Debian Buster x86_64 / ARM | OpenWrt: Empower your router | Blogje


  • RobIII
  • Registratie: december 2001
  • Laatst online: 18:49

RobIII

Moderator Devschuur®

^ Romeinse 3 ja!

quote:
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?")

RobIII wijzigde deze reactie 22-02-2018 00:47 (15%)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Tsunami
  • Registratie: juni 2002
  • Niet online
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
  • Registratie: juni 2002
  • Niet online
quote:
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
quote:
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

DJMaze wijzigde deze reactie 22-02-2018 01:23 (29%)

Maak je niet druk, dat doet de compressor maar


  • kaassouffle
  • Registratie: januari 2002
  • Laatst online: 18:12

kaassouffle

Medewerker v/d Maand

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
  • Registratie: januari 2003
  • Niet online

Borromini

Mislukt misantroop

Topicstarter
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.

Got Leenucks? | Debian Buster x86_64 / ARM | OpenWrt: Empower your router | Blogje


Acties:
  • Beste antwoord
  • 0Henk 'm!

  • maus
  • Registratie: november 2011
  • Laatst online: 17:00

maus

~ 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:
1
2
3
#headerToggle .toggle:before {
font-family: FontAwesome;
}

Dit terwijl je font awesome inlaadt in 'fontawesome-all.css' als 'Font Awesome\ 5 Free':
code:
1
2
3
@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
  • Registratie: juni 2002
  • Niet online
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
  • Registratie: januari 2003
  • Niet online

Borromini

Mislukt misantroop

Topicstarter
@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' 8)7

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

Got Leenucks? | Debian Buster x86_64 / ARM | OpenWrt: Empower your router | Blogje


  • Ramon
  • Registratie: juli 2000
  • Laatst online: 10:36
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.

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/


  • kaassouffle
  • Registratie: januari 2002
  • Laatst online: 18:12

kaassouffle

Medewerker v/d Maand

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

  • Tsunami
  • Registratie: juni 2002
  • Niet online
quote:
Maar dat is dus alleen nodig als je geen controle hebt over de HTML.

  • Borromini
  • Registratie: januari 2003
  • Niet online

Borromini

Mislukt misantroop

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

Got Leenucks? | Debian Buster x86_64 / ARM | OpenWrt: Empower your router | Blogje


  • DJMaze
  • Registratie: juni 2002
  • Niet online
quote:
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:
1
background-color: rgba(0,0,0,0.5);

quote:
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.

Maak je niet druk, dat doet de compressor maar


  • Borromini
  • Registratie: januari 2003
  • Niet online

Borromini

Mislukt misantroop

Topicstarter
Nee allemaal Android 7.

Got Leenucks? | Debian Buster x86_64 / ARM | OpenWrt: Empower your router | Blogje

Pagina: 1


Apple iPhone 11 Nintendo Switch Lite LG OLED C9 Google Pixel 4 FIFA 20 Samsung Galaxy S10 Sony PlayStation 5 Games

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2019 Hosting door True