Font Awesome Icons showing up as squares on menu bar - ios

My social icons are showing up as squares in the top right hand corner of my website. They are part of my menu. However, I have FA icons on other parts of my site and they are showing up perfectly. Any ideas how to fix this, simply? I don't have a lot of tech knowhow. My site is self hosted on Wordpress and I use IOS.

Please verify this two stuff:
1. Check if font-awesome is properly integrated on your website. You can view this by looking over page source and find if there is a link related to font awesome.It may look something like this but by different as well.
yourwebsite-directory-uri/font-awesome.min.css
Reference Link: http://fontawesome.io/get-started/
See if you have added font awesome properly using css.
.test-class {
font-family: 'FontAwesome';
content: "\f005";
}
Hope this will give you some hints.
Thanks

Related

why my asp.net website doesnt have any styling in the page inspector

I'm learning about SEO (Search engine optimization )
I have a website that I created using asp.net everything works just fine but
when I open the page inspector using chrome under network and click on the HTML code I noticed that there is no styling and no images
see picture :
can someone please explain what's the reason for that and what I can do about it?
for example if i inspect the source of SO the page is fully loaded with all the css and images
I tried to google it and I didn't find anything useful
Click on the area circled with red on the image to get all of the resources like styling(CSS), images etc. You can also click on the individual CSS or the Image button to only see styling or images.
missing css file? You may go to CSS blade to see the details. Opening F12 window then refresh your page.

Add / use custom SVG as material-icon

I'm using the material design package for my application layout menu.
I have 2 menus items where I can't find an icon that fits, so I got 2 SVG files that I added to the project.
I want to use this as the material-list-item icon instead of a material-icon.
Is there a way to do this by either adding a custom icon to the material-icon library or replacing the icon in the list.
If yes, please I need a complete example as I am new to DartAngular, still trying to figure out some stuff.
There is a mixin for material-icon which will get allow you to change a material-icon into using an SVG. https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_icon/_mixins.scss#L49
There is indeed a mixin for this as pointed out in Ted Sander's answer, but for the moment it does not seem to work. I've asked this on Gitter but did not get an answer, and I also opened a ticket on Github for this seemingly broken feature.
It's a telltale sign that even the official Angular Components Gallery has a broken SVG icon example.
I'd suggest to implement this by using separate list item rendering for those that have an official material-icon representation and those that need a custom SVG image, and conditionally render them with the ngIf directive.

How can I change the colour of the blue links (Twitter Widget)?

Here's the site: http://www.victoryfights.co.uk
Can only view on desktop currently.
Scroll down on the first page to see the embedded Twitter feed. I need to change the blue links to white.
Just that, nothing more. I've tried a bunch of CSS and nothing works.
Thanks very much!
you can add custom style hope this helps
https://dev.twitter.com/web/overview/css

Twitter "Tweet" Button IE7 Bug (cut off text)

I'm trying to use the Twitter "Tweet" button on a site. It works great in all browsers, but in IE 7, it doesn't show the full width. There's no additional CSS in place, other than a little padding-left on the LinkedIn button for spacing.
Twitter have said that they fixed this issue a few months ago here, but I'm using the latest code from their developers site with no luck.
I've also tried the solution from StackOverflow suggesting to use .twitter-follow-button {width: 150px !important;}, but this also didn't solve the issue. The image below shows how it looks in IE7, with the text incorrectly cut short.
Any advice or suggestions of where to go next would be very much appreciated.
It looks like you are using the Twitter Share button instead of the Twitter Follow button. Therefore the used class as suggested by the quoted stackoverflow thread will not work. You should be using:
.twitter-share-button {width: 150px !important;}
The issue was a surrounding for the Twitter button that was being placed in-line, hence there wasn't a sign of it in the CSS. Thanks for your responses.

Jquery Mobile Themeroller leaves stripes in the background

I have a problem that drives me nuts, i have used themeroller from jquery mobile and i love this tool, it has its flaws and one of them is when you use dark backgrounds it leaves a little white stripe at the top of the list you can see it right here
http://yellowgreenmedia.info/1-theme/
it is on the top , left and right of the list, its small but it is there
Is there a fix for this, so i can remove the annoying white stripe
Thanks
Dave
On this:
div class="ui-btn-inner ui-li" ...
Give it:
border-top:0
Worked at my end.
First I would add a HTML DOCTYPE
http://www.w3schools.com/html5/tag_doctype.asp
I think you're missing the opening <html> tag
http://yellowgreenmedia.info/1-theme/ (right click to view source)
and last I think you also need to add just the custom theme and not jQM default css
http://jsfiddle.net/UEuKA/3/
Last I would give the jQM Theme Roller another go as it looks to be adding CSS from RC2
http://jquerymobile.com/themeroller/
http://yellowgreenmedia.info/1-theme/css/style.css (jQuery Mobile v1.0rc2)
One more thing, your custom CSS could be causing the extra line as well, Didn't look at it too much though
http://yellowgreenmedia.info/1-theme/css/custom.css

Resources