I have a .scss page that includes the following:
.actiontitle{
font-size: 1.5em;
color: lighten($primary,20);
&.saving::before {
content: "\f110"; //spinner
font-family: "Font Awesome\ 5 Free";
font-weight: 900;
}
}
I want to be able to make the spinner pulse. Font Awesome has another class (fa-pulse) that does this, but I'm not finding any kind of unicode value for fa-pulse like I can for fa-spin.
Does fa-pulse have a unicode character that can be used in CSS?
This doesn't answer the question of if there is a unicode character for fa-spin, but I was able to somewhat accomplish what I want with the following:
&.saving::before {
content: "\f110";
font-family: "Font Awesome\ 5 Free";
font-weight: 900;
animation: fa-spin 1s steps(8) infinite;
}
Related
Using the following CSS:
.notice--info::before {
position: relative;
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: .5em;
left: 0;
color: #ff980052;
content: "\f071 ";
font-size: 4em;
vertical-align: text-top;
line-height: .1em;
text-indent: 0;
}
I've managed to achieve this look:
Using this Kramdown markup in Jekyll on the Minimal Mistakes theme:
{: .notice--info}
Important: Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.
The goal is to add font awesome icons as watermarks to the Minimal Mistakes Utility Classes defaults.
QUESTION 1: How do I get the first line to overlap without indentation?
QUESTION 2: How do I bring the text to the front so it's the top layer and isn't washed out by the alpha channel of the Font Awesome icon?
Thanks!
I've gone about re-creating your intended effect using Unicode rather than Font Awesome because you can achieve so much these days with a combination of Unicode and CSS filters that a third-party dependency like Font Awesome (which was popular in the early 2010s) may not be necessary any more.
Principally,
I've given the paragraph text-align: justify
I've made the paragraph see-through, by giving it an rgba() background-color
Finally, I've positioned the warning symbol beneath the paragraph, using a z-index of -6
Working Example:
.notice--info {
position: relative;
padding: 12px 12px 30px 12px;
font-size: 14px;
line-height: 24px;
text-align: justify;
font-family: sans-serif;
background-color: rgba(187, 197, 224, 0.3);
}
.notice--info::before {
content: '\26A0 \FE0F';
display: block;
position: absolute;
top: 42px;
left: 6px;
z-index: -6;
font-size: 80px;
filter: hue-rotate(-10deg) saturate(8);
opacity: 0.5;
}
<p class="notice--info"><strong>Important:</strong> Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.</p>
I've got a crush on a certain font named "Kimberly" and I'm trying to use it on a heading / motto of a website.
Applying the #font-face css rule worked for all browsers except IE7 where the heading isn't displayed at all, not even with a fallback font.
And what's most annyoing is that other page [ an example page downloaded from fontsquirrel.com after the conversion of the .ttf font into .eot ] works perfectly on all browsers versions.
Have anyone been through something similar?
Please, take a look.
Thanks
Try adding zoom: 1 to the elements that are using your custom font. So for example:
#motto {
position: relative;
top: 20px;
color: #000;
font-family: "kimberleyregular", Arial, sans-serif;
font-style: normal;
font-weight: normal;
zoom: 1;
}
Trying to create a content box that has a background color of white. It is inbetween the header div and footer div which are both images. I can't get it to align with the two divs AND have it without white space, only one or the other.
This is the CSS:
#content {
background-color:#ffffff;
width:1024px;
margin: 0 auto;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding: 0;
display: inline-block;
}
How do I get the content box to align with the rest of the page and not have any whitespaces?
This is what it looks like at the moment, I want to get rid of the space between the HELLO box and the images above and below it.
It doesn't seem as a clean solution to me, but here I go:
#content {
margin-top: -15px; margin-bottom: -15px;
}
Actually I don't know if -15px is good enough, you should try your own values.
It's not a great solution, but with the given information it's the only one i can come up with.
CSS
#content {
background-color:#ffffff;
width:1024px;
margin: 0 auto;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding: 0;
display: inline-block;
position:relative;
}
#topWhiteFix, #botWhiteFix {
position:absolute;
left:0px;
height:12px;
width:100%;
background:#FFFFFF;
}
#topWhiteFix {
top:-12px;
}
#botWhiteFix {
bottom:-12px;
}
HTML
<div id="content">
<div id="topWhiteFix"></div>
<div id="botWhiteFix"></div>
HELLO
</div>
(Untested)
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';
maybe anyone have an idea why this is happening and how to fix it ?
p
{
display: block;
margin: 1em 0px;
}
p.description
{
color: #969797;
font-family: Calibri, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: lighter;
letter-spacing: -0.05em;
line-height: 1em;
text-decoration: none;
text-shadow: none;
text-transform: none;
word-spacing: 0em;
}
You mean why FF displays things bold?
I'd have to see your code i suppose...
Special characters, though, are usually a bit tricky. If your character encoding type is not set right, or the visitor has the right font not installed, the browser may just pick another font that looks like it.
The difference between the browsers is caused by Webkit (at least so I think).
Safari and Chrome use Webkit, maybe that's it...