I am trying to display a envelope flaticon. I have tried everything and the envelope will not display. I have the following link set up that links to the css file :
http://patskailua.com/font-email/font/flaticon.css
The icon that I am trying display is
http://www.patskailua.com/font-email/001-interface.svg
The directions on the flaticon says to publish it using the following code:
<svg class="icon">
The website is at:
http://patskailua.com/div6.html#
I have tried everything and cannot get this icon to display. Any help would be greatly appreciated. Thanks, Beth
Please try this in HTML page:
<img src="http://www.patskailua.com/font-email/001-interface.svg">
Try this.
In http://patskailua.com/font-email/font/flaticon.css, remove font-email/font/ from the url of the font.
The style will look like shown below.
#font-face {
font-family: "Flaticon";
src: url("Flaticon.eot");
src: url("Flaticon.eot?#iefix") format("embedded-opentype"),
url("Flaticon.woff") format("woff"),
url("laticon.ttf") format("truetype"),
url("../svg/001-interface.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
Related
Getting red flagged for:
Ensure text remains visible during webfont load Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading
I have font-display: auto in my font declarations:
#font-face {
font-family: 'lagosregular';
src: url('../fonts/lagos-webfont.woff2') format('woff2'),
url('../fonts/lagos-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: auto;
}
https://africankitchen.gallery
I'm testing your site on PSI but not getting the Ensure text remains visible during webfont load. Did it resolve itself? If you took some extra steps or different path to make it happen, consider answering your own question for others who find this.
You're right, sorry, about two days later, it disappeared and I forgot to resolve this post.
It was odd and persistent for days, then it vanished without me doing anything else.
Thank you.
I am trying to specify a backgroud image for my google site, i have the following code inside the HTML Box
body {
background: #372412;
background-image:url('a/mysite/my/home/body.jpg');
background-repeat:repeat-x;
margin: 0;
padding: 0;
font-size: 13px;
color: #FFFFFF;
}
i tried different options but the HTML Box Properties page just reports an error and i cannot get the image into my page.
i have one more image loaded using
<img src="/a/mysite/my/home/img11.jpg"
this image is shown properly so i suppose that the link is referring correctly.
can someone give me some direction to solve the above issue
I don't think you can change the background in Google Sites like this. The HTML Box is sanitized, and this CSS will probably go away.
Instead, use More -> Manage Site, then choose Themes, Colors & Fonts, and specify the background you wish to use.
I was looking for my answer # CSS media query but couldn't find it so I thought I would ask here.
Can CSS media queries be used offline/locally? I'm building a webpage it's all on shared network drives and I'm trying to setup different stylesheets based on resolution and I want to use CSS media queries min-width but they don't seem to be working and I'm wondering if it's because my site isn't live? (similar to how favicon doesn't work locally, only on hosted sites).
An example would be:
<style type="text/css">
#media all and (min-width: 1024px) {
background-image: url(images/bigbg.jpeg);
}
body {
width: 1000px;
background-image:url('images/test.PNG');
background-repeat:repeat;
overflow-x:scroll;
}
</style>
Any suggestions? Much appreciated :)
Should work locally, but you need to define what's changing. Try:
Original:
#media all and (min-width: 1024px) {
body {background-image: url(images/bigbg.jpeg);}
}
Even better:
#media all and (min-width:1024px){
body{background:url(images/bigbg.jpg)}
}
Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help
from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.
Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.
I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.