The old domain was https://pitypangvendeghaz.com, the new is https://pitypangvendeghaz.hu. The css of the site became ugly, and I can not find a solution.
Can anybody help me what is the problem? I tried all of the steps which are recommended after domain change.
as I can see you didn't move your files correctly.
errors in Chrome
Move you folder with videos and pictures. And also move your file
/wp-content/uploads/tc_stylesheets/hotel-wp.1558556385.css
Go to appearance -> theme editor and then copy the css in style.css
I would like to use the flag-icon-css library in my Angular 8 project. I've managed to import it and the flags are showing, however, they are only displaying as squares. How do I get them to display as rectangles?
I installed the library through npm and added this code to my global styles file (per this answer: Can angular cli use flag icon css?):
$flag-icon-css-path: '~flag-icon-css/flags' !default;
#import "~flag-icon-css/sass/flag-icon";
This is the code I use in my template:
<span class="flag-icon flag-icon-us"></span>
I am not using the flag-icon-squared class. Still, the flag is only displayed as a square.
EDIT (Added to clarify):
If I increase the width of the span, the span widens, but not the flag itself. I also tried using flag-icon-background, with the same result.
I checked the svg image itself, and it is a rectangle, however, I noticed that it also has a lot of whitespace on its left side. So that might be causing the issue - the span is displaying the whitespace and only part of the flag.
I'd appreciate any suggestions!
The reason this is happening is because the 1x1 and 4x3 ratio SVGs are being copied to the root folder after a build - you can see if this you view the style of the icon and hover over the background image URL. The 1x1 images are being used by the CSS which is why the flags are always square - I'm not sure why this was not an issue in Angular 7.
A work around is to manually copy the images into your assets folder and manually update the CSS to point to your assets folder. The downside is that you will have to manually update the CSS every time you update the npm package.
See here:
https://github.com/lipis/flag-icon-css/issues/514
I've recently has the same problem.
I overcame this by renaming the SVG files and redirecting the paths referenced in the styling files.
Specifically, you can see the changes I made here: https://github.com/nunnsy/flag-icon-css/commit/2eabbda9daf6a53627a7d4952eae0d1164bb04fc
This is by no means a long-term fix, I just needed a quick hack personally and figured someone else may want some guidance.
I understand Angular was copying the files and overwriting the 3x4 with the 1x1 due to them having the same name (separated by folder), hence the renaming out of the folder with the size now in the file name: XY_xx.svg
Even trying to reconfigure image hashing did not solve my issue - if someone has a way of implementing this, I'd appreciate to know how you implemented it. Or, any other solution, I'll be watching this question.
I'm experiencing the same issue in debug mode but not for a production build. So if it's an issue you do not want to spend a lot of time on, know that it won't exist in a production environment, building with the --prod flag solves it.
If you don't need square ones
Fast ugly hack: change the names of folders 1x1 and 3x4
I think it is correct to download images bypassing npm
Here is my Wordpress website : http://vps319156.ovh.net/
The icons are not displaying correctly since I upload a new plugin Visual line for Visual Composer.
I desinstalled the plugin and try to reinstall the font but it did not work.
The weird part is that I have one Icon working...
I tried many solutions from the web and could not find out one that is workable in my case..
You have the plugin font-awesome that is overriding iconfont.css definitions and so on, the [class^="icon-"].
It seems that the fontawesome related fonts are not found in the plugin font-awesome.
The plugins/font-awesome/assets/font-awesome.min.css couldn't find the font ../fonts/fontawesome-webfont.eot
Correct the path or copy the fonts file at this place.
In the browser dev tools, when you unclick fontawesome class, icons are display, it's just the enqueue priority to modify, it depends if you want to display, font-awesome icons or iconfonts.css icons.
So, i'm building a website using magento, i tried to install a theme but there are some files that dont seem to be loading, including some css, i'm gonna list the website and the demo of the theme so you guys can tell me if you see something where you can help:
The website
The Demo
As you can see, there is a lot going wrong... the name of the divs isnt even the same, i have followed the readme tutorial and done this multiple times, the theme was installed using magento connect.
I've done the whole System>Configuration>Design and pointed to the new theme...
If you could give me some clue about what's wrong, i'd be very thankful, any further details needed, just ask.
Package from Magento Connect includes only design and skin files without WebAndPeople Custommenu extension.
Which names of divs do you see as not similar? I installed this theme for test and it is similar to yours with div names. Don't look on the devdemoz.com's demo because it is modified theme and is not original that included in package! You can compare their style.css and your with diff or notepad++ to find differences (about 20% of original skin).
Footer. You made mistake in HTML code and placed tag <h3> outside of <ul>. Just move them one line down like in /readme.html file.
If you wish to use modified mobileshoppe demo from devdemoz.com you can simply grab their style.css and images and put in your folder.
I am migrating from bootstrap 2.3 to bootstrap 3 and everything works well. But when I tried to add some icons, the icon font doesn't displayed properly. I tried to look over here http://bootply.com/61521 and only '.glyphicon-envelope' was being displayed properly. Others have displayed like 'E001' and so on.
How can I be able to solve this problem?
For other browsers, glyphicons are displayed properly, only firefox was unables to display it properly.
Did you choose the customized version of Bootstrap? There is an issue that the font files included in the customized package are broken (see https://github.com/twbs/bootstrap/issues/9925). If you do not want to use the CDN, you have to download them manually and replace your own fonts with the downloaded ones:
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot
After that try a strong reload (CTRL + F5), hope it helps.
the icons and the css are now seperated out from bootstrap. here is a fiddle that is from another stackoverflow answer
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
http://jsfiddle.net/aQrPd/1/
Bootstrap 3 Glyphicons CDN
OK, my problem was not answered by the above. I had the fonts folder at the same location as the bootstrap css and js folders (eg /theme/bootstrap3/..), but it was looking for the font folder in the root (eg /fonts/glyph.. .woff)
The solution for me was to set the #icon-font-path variable to the correct relative path:
Eg #icon-font-path: "fonts/";
Here's the fix that worked for me. Firefox has a file origin policy that causes this. To fix do the following steps:
open about:config in firefox
Find security.fileuri.strict_origin_policy property and change it from ‘true’ to ‘false.’
Voial! you are good to go!
Details:
http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
You will only see this issue when accessing a file using file:/// protocol
I had the same problem using a local apache server. This solved my problem:
http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons
For Amazon s3 you need to edit your CORS configuration:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
First of all, I try to install the glyphicons fonts by the "oficial" way, with the zip file. I could not do it.
This is my step-by-step solution:
Go to the web page of Bootstrap and then to the "Components"
section.
Open the browser console. In Chrome, Ctrl+Shift+C.
In section Resources, inside Frames/getbootstrap.com/Fonts you will
find the font that actually is running the glyphicons. It's
recommended to use the private mode to evade cache.
With URL of
the font file (right-click on the file showed on resources list),
copy it in a new tab, and press ENTER. This will download the font
file.
Copy another time the URL in a tab and change the font
extension to eot, ttf, svg or woff, ass you like.
However, for a more easy acces, this is the link of the woff file.
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
I ended up switching to Font-Awesome Icons. They are just as good if not better, and all you need to do is link in the font, happy days.
make sure the name of the folder that contains the font name is "fonts" not "font"
you can use tag like this:
<i class="fa fa-edit"></i>
Just in case :
For example, I just tryed <span class="icones glyphicon glyphicon-pen">
and after one hour i realized that this icon was not included in the bootstrap pack !! While the enveloppe icon was working fine..
Hope this helps
As others have noted, there are some issues with the customizer.
I was having troubles with the glyphicons not showing either, as well as issues with the navbar layout.
I used the suggestion and uploaded the fonts from the full zip/overwrote the ones from the customized version and that fixed the icons issues.
I also pulled in the CDN CSS and javascript instead of my local copy from the CDN. This fixed my navbar issues.
So I recommend until you get the hang of Bootstrap, not to use the customized version since you might get some frustrating, unwanted results.
For me placing my fonts folder as per location specified in bootstrap.css solved the problem
Mostly its fonts folder should be in parent directory of bootstrap.css file .
I faced this problem , and researching many answers , if anyone still in 2015 faces this problem then its either a CSS problem , or location mismatch for files .
The bug has already been solved by bootstrap
This is the official documentation supporting the above answers.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the #icon-font-path and/or #icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Other than this one mistake the new users would do is, after downloading the bootstrap zip from the official website. They would tend to skip the fonts folder for copying in their dev setup. So missing fonts folder can also lead to this problem
Try using CDN
Try setting Access-Control-Allow-Origin HTTP Header