I used:
td.product-name dl.variation dd li:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
color: #000;
margin-right: 8px;
}
to add an icon :before each list element.
The icon appears as it should on Safari:
But not on Chrome:
Why?
Here's a link to my website: https://www.mydreamtattoo.com/checkout/?add-to-cart=3981
The check icon list is in the order review table below the product name.
I've used this method to add icons :before elements with CSS in the past in other places and it has always worked. This time it didn't.
Found the issue, you need to add font-weight: 600;
I had a similar issue and found adding font-weight: 900; worked.
Related
I want to insert a duotone fontawesome icon and can't find the way, I've always inserted only solid ones.
I'm starting from this:
input[type="date"]:after {
font-family: "Font Awesome 6 Pro";
font-weight: 500;
content: "\f133";
color: #555;
padding: 0 5px;
}
I tried content: "\f133\f133"; or content: "\f133\f133\f133";or putting 2 lines for content, one with content: "\f133"; and another with content: "\f133\f133"; but obviously didn't work.
Anyone already worked with this?
Thanks a lot,
Leandro.
I am trying to add css to my FullCAlendar 5 Events using 'classNames:'; e.g.,
classNames : cssItalic,
When I define the cssItalic css as:
.cssItalic {
font-style: italic;
font-weight: bold;
}
It works. However, when I change it to:
.cssItalic {
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
The underlining is not done (i.e., bold and italic work).
So, what css can be used with FullCalendar 5?
After further testing I found the the underline is shown in the list view however, not in the month, week and day views.
If you inspect the elements you're trying to underline, you'll notice that they have a style definition already:
a:not([href]):not([tabindex]){
color: inherit;
text-decoration: auto;
}
Your problem is that .cssItalic is not as specific as the existing selector that sets text-decoration. This is why bold and italics still work, but underline does not for these elements.
Your two options are: make the selector more specific, or use !important for the text-decoration rule.
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as
\2701 renders as ઍ
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..
This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.
The problem:
Observe the font weight of the top navigation here: http://www.octa.com (WordPress)
Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)
Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.
Here's the relevant bits of the css:
nav.menu li a {
font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
font-size: 20px;
text-align: left;
}
nav.menu li a, #subnavwrapper nav li a {
color: #FFFFFF;
font-weight: normal;
height: 50px;
line-height: 50px;
padding: 0 46px 0 0;
}
nav li a {
display: block;
line-height: 1em;
text-decoration: none;
}
body {
color: #000000;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif;
font-size: 14px;
line-height: 1.55em;
text-align: center;
background: black;
}
Note that the font is imported using #font-face.
I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
Try -webkit-font-smoothing: antialiased;
I've found that this simple change made Safari's font-weight property much more reliable.
(I cannot post comments so I can only add my findings to the conversation by posting.)
I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.
Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale
fiddle here to show the problem - Safari only
With the comments / prodding from #JukkaK.Korpela, I discovered a few things:
First, the root of the problem is this:
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker
Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:
Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"
With that tool, I was able to troubleshoot and solve this quickly.