font-mfizz displaying icons as square - html

Im using font-mfizz for icons on my site and for whatever reason they always appear as squares. I have all the fonts installed in all different formats and im still getting no results.
here is the code that I have
<i class="icon-javascript-alt"></i>

I had the same problem. When you download the font-mfizz package, simply paste all files (css, eot, svg, ttf, woff) to your project folder.

Related

Favicon of format PNG doesn't appear on Google search result page

<link rel="shortcut icon" href="https://www.website.com/template/img/website/favicon.png?ver=v2.1.31">
We changed our 32x32 png favicon to a 48x48 png favicon, because one of our websites reverted back to the default Wordpress favicon and after deploying the change we noticed that the favicon was reverted back to the Wordpress favicon still on the websites we deployed. So I was wondering if there was a fool-proof way of making sure that our favicon appears on the search result page.
One of the answers I got from Googling was that we should change favicon.png to favicon.ico, but the Google documentation tells us it's not necessary. What changes can we do to make it work without changing the file format?
https://developers.google.com/search/docs/advanced/appearance/favicon-in-search
First, keep in mind that Google can take days or weeks before reflecting your icon in its search results. So any change you make needs patience, unfortunately.
However, you can get insights from Google. Visit https://www.google.com/s2/favicons?domain=www.website.com , just make sure to replace the domain parameter with your own site. There is no evidence that this is what Google is actually using to fill its results pages. But chances are that what this entry point returns is what you can expect in results pages a bit later.
According to me to add a favicon, one should use the .ico image. Otherwise, it might show some issues. Try converting your .png image to .ico by using this converter.
This will work for sure.
Here's a text from a webpage I searched about the favicon.
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
So according to this .ico is mostly preferred over any other extension of the image. Hence I would recommend you to use .ico extension for the image.

Images being found on website load but not loaded correctly (broken)

Have this weird case when my images are being found in sources, linked correctly, src url is okay, but still not being displayed. Other images in that same folder are being loaded and displayed just fine, but my new uploaded images are not. I'm using open cart and upload images via ftp. Permissions are fine 644 like the others. I asked other developers in my team and no one has any clue why is that. Guys tried downlaoding and opening the image on their computer and can't even open it, whereas I'm using MAC and can open the same images on my computer without any problems. Images are saved as .jpg from Photoshop. What's the deal here? Here is how it looks in Mozilla:
This can happen because of corrupted image file. Most likely it is the extension problem of the file. Instead of doing save as in Photoshop, try exporting the image through export settings and choose png or jpg format there. It should work fine now, it worked for me.
Just to make sure on this front - Are you uploading them as .JPG or .jpg? If so, the problem may lie there...
If you link to a file that is .jpg and you put .JPG into the code for the link, the link will not work.
Make sure you're not using uppercase JPG as some servers will not read/detect them, and you will not able to see the pictures until you change the extension to lower case jpg.
Also, make sure the color mode, if saving them from Photoshop directly to jpg, is RGB format. If you use any other color mode, it may not display at all. CMYK files for example will not display correctly.

uploading fonts to wordpress site

what's the easiest and most effective method for uploading fonts to a wordpress site? I have fonts on my computer I'd like to reference instead of google fonts already embedded in. wasn't sure if ftp (and in what location) or an app works best. danke.
There are several things you need to know before embedding a font in your site. I can walk you through the process here:
Make sure the font you want to upload is allowed to be on the web. Some foundries don't want their fonts embedded because people can steal them from the embedding website. Check who makes your font and what you need to do to satisfy their licensing. All Google fonts are open licenses, so you don't have to worry there.
Find the font file on your system. This is usually a .ttf or .otf file. If it is not one of those, it will be difficult to embed them correctly.
Once you have your font, you need to convert it and package it. This is easy with services like FontSquirrel. They will do all of the converting and packaging for you as well as writing the CSS to embed the fonts.
The method you are using to embed the fonts is known as #font-face. This code should be in your stylesheet. Here is a tutorial on using #font-face. Make sure when you put the code in your CSS file that the fonts are in the right directory that you are targeting in the URLs for the fonts in the stylesheet. FYI the normal stylesheet location for Wordpress themes is in your theme folder under styles.css. I believe that FontSquirrel's generated CSS puts the fonts in the same directory as the stylesheet, so they may need to be in the theme's root to work properly. Though, I would suggest putting them in a fonts folder and updating the URLs in the stylesheet.
That's it! It's a little more difficult than just adding a file, but it should work. If you have issues with spacing or lining things up, I have another answer I wrote that might help you out, there as well.

Font Awesome does not work in browser, but works in codepen

I downloaded Font Awesome today and did it a try. In firefox and chrome (latest versions) it appears as blank squares. If a use the CDN link, it doesnt even work, the standard bullets appear instead of the blank squares. But in codepen.io, it just worked fine, using the CDN.
The html i used is just the same as the example of the lists, which is here: http://codepen.io/pietrofxq/pen/BCaoD
Does someone knows the problem?
You are using a schemaless URL to access the CDN.
If you are trying to open the page from your disk (schema being file://) then it will fail is it will use the same schema to access the CDN
Try with a full URL http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
If you are calling it from a server, then make sure that the font files are delivered correctly. Some servers need to be told to allow the font files to be accessed.
(use the console to see if they load ok)

image problem with dreamweaver

i'm trying to create a newsletter in a single html file, which will be loaded into outlook express and sent out as a mail.
i have like a few images embedded onto the html file but 2 of them cant be loaded for preview in design mode. there is no problem for the rest of the images. those images that cant be loaded has the grey color icon.
the directory for the images are the same. i have copied and pasted the absolute directory for the images that cant load and it doesnt work.
the images loads fine when executed from the html file that was uploaded to the webserver.
edit:
it only loads fine in firefox, and not ie!
i need to get the newsletter out tomorrow, any assistance here?
thanks in advance.
That sounds like a transparent PNG. If you are using an old version of IE, you are out of luck for the HTML email. Try using another type of image (8-bit PNG, PNG with no alpha values, JPEG, GIF). Open the image in your editor and save it as an 8-bit PNG, for example. An 8-bit PNG can only have binary transparency. You may have to redesign the page/email.