Resolved Bootstrap icons not showing on https pages in FF and IE

[jbrouwer 5]

Hi,

I am using bootstrap icons in my admin bar and in the footer. However, on https pages they are not showing up in Firefox and Internet Explorer.

See the difference:

https://www.pepperbase.com/registreren

http://www.pepperbase.com/

What could this be?

Thank you.

[Danny+ 1,327]

Hi,

Where are the icons supposed to be, can you reply providing an image please.

[jbrouwer 5]

Hi,

The icons are in the admin bar:

It doesn't always happen. First I thought it had to do with SSL, but it happens on http pages as well. Strange thing is that when I copy paste a screenshot when the icons are missing, they do appear in photoshop! So I cannot provide a pic when the icons are missing. When you browse around on my website it happens after a couple of clicks.

[Danny+ 1,327]

AH OK, I see the issue.

Can you try adding this to either your child themes functions.php file or if you're using the PageLines Customisation plugin, add the below code to the plugins functions.php file.

add_action( 'pl_force_ssl', '__return_true' );[/CODE]


Let us know if this resolves your issue.

[jbrouwer 5]

I already have that in my child themes function.php file. Is the bootstrap icons plugin required? http://www.pagelines.com/store/plugins/bootstrap-icons/

[Danny+ 1,327]

Can you provide the code you're using for you icons, as well as the code used to add the icons to your Wordpress admin bar please so I can take a closer look.

[jbrouwer 5]

function add_sumtips_admin_bar_link() {

global $wp_admin_bar;

    global $bp;

    if(!is_user_logged_in()){

$wp_admin_bar->add_menu( array(

	    'id' => 'home',

	    'title' => __( '<i class="icon-home"></i>'),

	    'href' => __(home_url()),

) );

    $wp_admin_bar->add_menu( array(

	    'id' => 'inloggen',

	    'title' => __( '<i class="icon-signin"></i> Inloggen'),

	    'href' => __(home_url('/inloggen')),

) );

    $wp_admin_bar->add_menu( array(

	    'id' => 'registreren',

	    'title' => __( '<i class="icon-pencil"></i> Registreren'),

	    'href' => __(home_url('/registreren')),

) );

    }

$wp_admin_bar->add_menu( array(

  'parent' => 'my-account-buddypress',

  'id'	 => 'abonnement',

  'title' => __( 'Abonnement'),

  'href' => __( home_url('/mijn-pepperbase')),

	    'meta'   => array(

   'class' => 'menupop',),

));

    $wp_admin_bar->add_menu( array(

  'parent' => 'my-account-settings',

  'id'	 => 'sociale_netwerken',

  'title' => __( 'Sociale netwerken'),

  'href' => __( bp_core_get_user_domain($bp->loggedin_user->id) . 'settings/buddystream-networks/'),

));

}

add_action('admin_bar_menu', 'add_sumtips_admin_bar_link',10);

[jbrouwer 5]

IE console messages on https pages:

SEC7111: HTTPS security is compromised by http://www.pepperbase.com/wp-content/themes/pagelines/fonts/plfont-regular.eot?#iefix

SEC7111: HTTPS security is compromised by http://www.pepperbase.com/wp-content/themes/pagelines/fonts/plfont-regular.woff

SEC7111: HTTPS security is compromised by http://www.pepperbase.com/wp-content/themes/pagelines/fonts/plfont-regular.ttf

[Simon 248]

Your site is not SSL you are using some plugin to make one page SSL. If the site was all SSL then all urls would be https://

http://www.pagelines.com/forum/topic/20093-secure-contact-page/page__hl__plroot

This post has a filter to force ssl in the LESS css.

[jbrouwer 5]

Yes I know I have only a couple of pages in SSL.

I have added this code:

add_filter( 'pless_vars', 'make_ssl_vars' );


	    function make_ssl_vars( $vars ) {


			    $vars['plSectionsRoot'] = str_replace( 'http://', 'https://', $vars['plSectionsRoot'] );

					    $vars['plRoot'] = str_replace( 'http://', 'https://', $vars['plRoot'] );

			    return $vars;

	    }

to my child themes function.php file. The icons are still not being displayed and I get the following messages in the IE console: Next I added an if (is_ssl()) statement:

add_filter( 'pless_vars', 'make_ssl_vars' );

function make_ssl_vars( $vars ) {

if (is_ssl()) {

  $vars['plSectionsRoot'] = str_replace( 'http://', 'https://', $vars['plSectionsRoot'] );

    $vars['plRoot'] = str_replace( 'http://', 'https://', $vars['plRoot'] );

  return $vars;

}

}

but then this error appears in the admin bar: Error in core Less code: expected color value: failed at `color: fadeout(@pl-footer, 40%);` line: 1156

In this post http://www.ubelly.com/2011/06/taking-our-own-advice-fixing-css3117/ I found another solution, but I am not sure how to implement or if it would work at all.

Any ideas?

[Simon 248]

NO, you cant add a if_ssl() as your blog is not SSL.

http://screencast.com/t/ThlXfka8TGn The filter works. Just do not add the conditional.

[jbrouwer 5]

Ok, I removed the if is ssl again. The icons are showing up on ssl pages, but not on http pages...

That is why I tried the if is ssl statement.

[Simon 248]

Looks to me like this is some sort of browser security issue. It wont let you include fonts cross domain or cross protocol.

I would just adjust your menu filter to not include them on the pages they dont work on. Or make your blog ssl.

[Simon 248]

Google suggested answer:

<FilesMatch "\.(ttf|otf)$">

<IfModule mod_headers.c>

Header set Access-Control-Allow-Origin "*"

</IfModule>

[/CODE]

[jbrouwer 5]

Yes. I would like to make my blog SSL, but Amazon Cloudfront does not support SSL with CNAMES, so doing that will seriously slow down my site.

Thank you for the answer. Where should I put this piece of code?

[Simon 248]

.htaccess apparently it allows browsers to load fonts cross domain.

[jbrouwer 5]

It works in FF, but not in IE9...

[Rob 547]

Well, that confirms Simon's suspicion that this is a browser issue.

[jbrouwer 5]

Yes it is a browser issue. I activated W3TC again and now it is working in IE9 as well. Thank you for all your help.

[Danny+ 1,327]

The topic was marked as resolved.