HTML:
<div class="postleftmen">
<header class="clearfix">
<span>Post Ad</span>
<h1>Select categlory</h1>
</header>
<ul class="cbp-vimenu">
<li>Logo</li>
<li></i>Archive</li>
<li>Search</li>
<li>Pencil</li>
<li>Location</li>
<li>Images</li>
<li>Download</li>
</ul>
am trying to change the font icon color on hover
class="flaticon-smart"
code used to ling font icon
visited this link CSS, changing hover effect of icon font in a link and changed in my code but its not work
CSS
#font-face {
font-family: "Flaticon";
src: url("flaticon.eot");
src: url("flaticon.eot#iefix") format("embedded-opentype"),
url("flaticon.woff") format("woff"),
url("flaticon.ttf") format("truetype"),
url("flaticon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 10px;
font-style: normal;
margin-left: 10px;
}
.flaticon-smart:before {
content: "\e038";
color: #9999ff;
}
If you want to use JQuery, you can use the hover function
First include JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
and then
$(document).ready(function() {
$('.flaticon-smart').hover(function(){
$(this).css('color', '#f00');
});
});
Edit
If you want to do it with CSS put this in the <head> </head> section
<style>
.flaticon-smart:hover{
color: #f00;
}
</style>
The color changes back to the original when you stop hovering the link.
If you want it changed permanently use the JQuery solution
I would not recommend using jQuery at all. Instead, do this.
REGULAR OR NORMAL MODE
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {color: $smoke;}
HOVER OR MOUSEOVER MODE
[class^="flaticon-"]:hover:before, [class*=" flaticon-"]:hover:before,
[class^="flaticon-"]:hover:after, [class*=" flaticon-"]:hover:after {color: $red;}
RECAP:
REGULAR OR NORMAL MODE: element:after, element::after or element:before, element::before (no change)
HOVER OR MOUSEOVER MODE: element:hover::after or element:hover::before (change)
I hope that made sense and good luck to you.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Related
I downloaded two custom fonts for my website, and I am trying to make one of them the default font for almost everywhere in the website, and the other one for some certain areas. So my code look something like this:
function App() {
return (
<div className="App">
<nav>
<ul className="Navbar">
<li className="link1"><Link to="/">Home</Link></li>
<li className="link2"><Link to="/AboutMe">AboutMe</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/AboutMe" element={<AboutMe />}/>
</Routes>
</div>
);
}
CSS:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 18px;
font-family: 'Montserrat-VariableFont_wght';
}
#font-face {
font-family: 'BowlbyOneSC-Regular';
src: url('../fonts/BowlbyOneSC-Regular.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'Montserrat-VariableFont_wght';
src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
.link1{
font-family: 'BowlbyOneSC-Regular';
}
Both link1 and link2 are now in the font of Montserrat-VariableFont_wght, and when I remove font-family: 'Montserrat-VariableFont_wght';from the * selector. Link1 will then be BowlbyOneSC-Regular and then link2 become some random default font provided by browser, which is not what I want. So, how should I do it?
You can make the
.link1{
font-family: 'BowlbyOneSC-Regular' !important;
}
notice ! important this will override the link1 css and link2 will be default one defined.
You can do something like a utility class with the font face. I usually do .ff-roboto .ff-arial and implement font family there.
.ff-BowlbyOneSC';{
font-family: 'BowlbyOneSC-Regular';
}
now you can use link2 as ff-BowlbyOneSC
<li className="link2 ff-BowlbyOneSC"><Link to="/AboutMe">AboutMe</Link></li>
* is not a good way of defining css property as it apply this font family to all the html element.
body{
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 18px;
font-family: 'Montserrat-VariableFont_wght';
}
you can also see I have removed regular from the name. It means you can also have font weight related utility functions like .fw-300 or fw-bold fw-black this how you can create reusable classes.
I'm creating an HTML newsletter. I'm using nested array. I have two question : how do I import font? Because #import and #font-face are not working on my newsletter (but works on simple html)
And the second is this :
How can I " vertical align middle " 2 span with different font-size ? It's working on simple html but not on the newsletter...
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="#"
style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;"> <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>
<span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
<!-- color: white;">-->
<!--</p>-->
<p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
<p style="Margin: 0;font-size: 12px;line-height: 14px">
Mairie de Montargis - Salle Montdignan
</p>
</td>
</tr>
</tbody>
</table>
What I get:
What I need:
My fonts :
#media screen{
#import url("https://use.typekit.net/jqe0zpu.css");
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
#font-face {
font-family: 'Walsheim';
font-weight: normal;
font-style: normal;
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');
}
#font-face {
font-family: 'Walsheim';
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
font-weight: 800;
font-style: normal;
}
}
As I mentioned in my comment, Outlook does not work with all web-fonts like Google fonts. You don't include full paths to resources so there is no way for us to test what you are doing and look for a solution.
My first suggestion is to open your email in a web browser and test to see if it works at all. If it does, then I suggest testing what you are doing in an Apple or IOS email client, since they seem to work well with web fonts. If it works, you know you have things coded correctly.
Generally an HTML document wih a web font needs a link to that font and applied in a class for use in the document.
You should have a link like this:
<style>
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>
Or this:
<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">
Next, you need to find some way to get the font out into the document.
<style>
.classname {
font-family: GT-Walsheim, Arial, sans-serif;
}
</style>
In the last example, I added Arial as a fallback font that is pretty web-safe because Walsheim is not going to work with Gmail and most likely not work with Outlook 2007, 2010, 2013-2019.
Finally, apply the classname:
<p class="classname">Hello</p>
You could go fancy and add in inline styles as well:
<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>
This is a very basic plan on how to work with web fonts in email.
Good luck.
Here is a simpler method of using div tags:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#fevrier {
background: #00436f;
border-radius: 10px;
font-weight: bold;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
text-align: center;
text-decoration: none;
width: 180px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle -webkit-text-size-adjust:none;
padding-top: 25px;
padding-bottom: 25px;
}
#fevrier .text {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<div id="fevrier">
15 <span class="text">FÉVRIER </span>
</div>
My problem is very simple and the symptom is weird.
In the head of my HTML, I have included the code to load the font directly from Google Font.
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
And this is my CSS:
.text {
font-family: 'Roboto', sans-serif;
color: white;
font-size: large;
}
No matter what customization I choose, the font seems to be the normal font. I tried with Roboto Thin (Roboto:100) and Roboto Thin Italic (Roboto:100i) but none of them actually change.
Is there anything that I miss in my code?
It depends on which font you have from google, in this case:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
You approach to each font weight in CSS like that:
// 300 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
// 400 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
// 700 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
You are loading Roboto font with 700 font weight and trying to show it with 100 font weight. Embed it with the following URL:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">
Using this link, it will work fine for you.
Update: This code snippet will explain you it in detail.
.text {
font-family: 'Roboto', sans-serif;
color: #000;
}
.text-100 {
font-weight: 100;
}
.text-100i {
font-weight: 100;
font-style: italic;
}
.text-400 {
font-weight: 400;
}
.text-700 {
font-weight: 700;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">
<div class="text text-100">
Hello (Font weight: 100)
</div>
<div class="text text-100i">
Hello (Font weight: 100i)
</div>
<div class="text text-400">
Hello (Font weight: 400)
</div>
<div class="text text-700">
Hello (Font weight: 700)
</div>
You simply need to set the font of your weight in your CSS
.text {
font-weight: 700;
}
First of all load all the fonts-
Just use
font-weight: 100|300|700 /Any one of them/ .
Google fonts basically work with font-weight property. The google fonts are rendered according to the font weight specifications.
For example-
Case 1 - font-weight:100 then thin font will load.
Case 2 - font-weight:300 then light font will load.
Case 3 - font-weight:700 then bold font will load.
In your css file, add:
#import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
at the top.
And, user it in the desired class like:
.class{
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
I have a link and icon (font) after it. Need prevent wrapping between link and icon: for long link line break should appear between words not between word and icon. I've created parent block with nowrap and inner block with wrapping, it works in FireFox but doesn't work in Chrome and IE (IE10 for example). For test purpose I also created the same layout with image (instead of icon) and have the same result - http://jsfiddle.net/6ak7q/2/ - when I change window size I see that on new line there is only image without any word.
Maybe related question - Link arrows dropping to new line, but I can't use background for font icon...
Original code with font-icon:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#font-face {
font-family: 'Glyphicons Regular';
src: url('../fonts/glyphicons-regular.eot');
src: url('../fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') format('woff'), url('../fonts/glyphicons-regular.ttf') format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
.glyphicons {
display: inline-block;
position: relative;
color: #1d1d1b;
text-decoration: none;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.glyphicons.nl-icons.unlock {
font: 12px 'Glyphicons Regular';
height: 12px;
padding: 0 5px;
width: 22px;
}
.glyphicons.unlock:before {
content: "\E205";
}
//added for old IE
.glyphicons.unlock {
zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
body {
font-size: 11px;
}
.titleResult {
white-space: normal;
}
.resultHeader {
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width:30%">
<div class="resultHeader">
<span class="titleResult"><a href="example.com">Test long title Test long title Test long title Test
long title Test long title Test long title</a></span><span
class="small nl-icons glyphicons green unlock"></span>
</div>
</div>
</body>
</html>
Keep the icon and text inside one more span and apply nowrap class for that.
.titleResult {
white-space: normal;
}
.resultHeader, .nowrap {
white-space: nowrap;
}
<div style="width:30%">
<div class="resultHeader">
<span class="titleResult">Test long title Test
long title Test long <span class="nowrap">title <img
src="https://www.google.com/images/srpr/logo4w.png" height="15"/></span></span>
</div>
</div>
I am having issues formatting any block elements with an embedded font in Safari and Chrome on a Mac.
Formatting is correct for all windows browsers (IE, Firefox, Chrome even Safari), and the font correctly displays for inline elements. I have stripped the html to just the following basics and still having this issue - What am I missing ??
#font-face { font-family: yowieFont; src: url(/template/GROBOLD.ttf); font-weight:normal; font-style:normal; font-variant:normal;}
h1 { font-family: yowieFont; color: #ed2249;}
h2 { font-family: yowieFont; color: #ed2249;}
h3 { font-family: yowieFont; color: #ed2249;}
p { font-family: yowieFont; color: #ed2249;}
span { font-family: yowieFont; color: #ed2249;}
<h1 style="display: inline;">1: CONTACT US</h1>
<h1 >1: CONTACT US</h1>
<h2 >2: CONTACT US</h2>
<h3 >3: CONTACT US</h3>
<p >P: CONTACT US</p>
<span>span: CONTACT US</span>
I resolved this issue by running the font through the font squirrel tool:
fontsquirrel.com/tools/webfont-generator
The tool generated the differing web formats required and fixed the line-height issues I was also having with this font
#font-face {
font-family: 'yowieFont';
src: url('/template/grobold-webfont.eot');
src: url('/template/grobold-webfont.eot?#iefix') format('embedded-opentype'),
url('/template/grobold-webfont.woff') format('woff'),
url('/template/grobold-webfont.ttf') format('truetype'),
url('/template/grobold-webfont.svg#groboldmedium') format('svg');
font-weight: normal;
font-style: normal;
}