Once again updating, once again plowing!

Hi there!

I remember at the beginning I was hopeful this theme would be easy customizable and it was! After a while I found sometimes I should be concern about every update come out because it may plow any customization and even any non-customized elements. This time again I noticed my blog appearance is altered after updating to 6.2.3 version and of course it is a boring point for me!

  1. default font of blog does not load!
  2. some font awesome icons don’t load!
  3. some images like post default image in home page or most visited posts’ image in footer area don’t load!

I don’t now any other element get damaged or not!?

my domain is www.otoraby.com
Is there any solution to solve them easily?

Hello There,

Thank you for sharing your site URL. I can see the issue. Found out you have this line on your child theme style.css file:
@import url( '../x/framework/css/dist/site/stacks/icon.css' );
Are you still using an older structure of the child theme? If you’re not sure of the answer please check this detailed explanation:

The option now is either use updated child theme as discussed on that article or just update that line from your child theme styles.css file from this:
@import url( '../x/framework/css/dist/site/stacks/icon.css' );
to this:
@import url( '../x/framework/dist/css/site/stacks/icon.css' )
See that dist and css folder difference.

The issue happens because there’s changes in the structure. Now, how you called on that CSS should be updated to reflect to the correct folder structure. This change is not needed if you are using an updated version of the child theme.

Hope this helps.

Thank you! with modifying child theme url, font and images loading issue solved but still some font awsome icons don’t load correctly! should I change something in my customization?

Hello @omid020,

Thanks for updating the thread.

I checked your website and can see that some Social share icons are not displaying properly. When I checked the code in dev tools and can see that the old code is being outputted for social share icon. As we have updated the font awesome, now the code should look like data-x-icon-b instead of data-x-icon. I changed the code in dev tools and icons are showing up. Please see screenshot in secure note. If you are using custom PHP code to output the social share icon from child theme, then please update the code with the one shared in following thread.

Thanks.

Hi @Prasant,

I did your solution, some items solved but still some icons don’t load in pages!
for example this one does not load:
<i class=\"x-icon-share-alt-square\" data-x-icon-b=\"&#xf1e1\"></i>
but this one loads without any issue:
<i class=\"x-icon-share-alt-square\" data-x-icon-b=\"&#xf174\"></i>

Hello @omid020,

Thanks for updating the thread.

I checked the website and can confirm that still there are some icons that are not displaying properly. To fix that replace the code from data-x-icon-b to data-x-icon-s. Please note that the changes are supposed to made for the icons that are not showing up properly. Here is a screencast, please see secure note.

More information regarding icons not showing up can be found in following post. It’s the 4th item that has the all information related with icons issue.

Thanks.

Thank you! Unfortunately it got more complicated and it is not integrated as before but I find out your purpose. My last question is how to use regular font instead of solid one?

Thanks in advance.

Hi,

Regretfully those icons don’t have a regular version

You can check on the link below

https://fontawesome.com/icons?d=gallery&s=regular

Thanks

Hi Paul,

Yeah I know those icons don’t have regular one but I have some icons on other sections which have regular option. for example what changes should I make in this code or its related CSS code to have regular icon instead of solid one?
$('input.submit.x-btn.x-btn-real.x-btn-rounded').wrap('<span class="x-icon-bell-o" data-x-icon-b=""></span>');

span.x-icon-bell-o:before {
  content: "\f0f3";
  font-family: fontawesome;
  position: relative;
  top: 14px;
  left: 33px;
  color: #AFA;
  display: inline-block;
  font-size: 20px;
  font-weight: 900;
  z-index: 2000;
  -ms-transform: rotate(22deg);
  -webkit-transform: rotate(22deg);
  transform: rotate(22deg);
}

Hey Omid,

Change the data icon to o and in the CSS, remove the font family.

Hope that helps.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.