This question already has answers here:
SASS compile fontawesome preserve notation
(2 answers)
Closed 7 years ago.
I have ant html page page using a CSS class to display an AwesomeFont with the content f058, but its appearing as a square now.
HTML :-
<div class="sucessfullChange">
<div class="sucessfullUsageChangeMessageConfirmation">
</div>
<span style="word-break: break-all" class="sucessfullChangeMessage">Congrats.</span>
</div>
CSS:-
.sucessfullUsageChangeMessageConfirmation {
&:after {
content: "\f058";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: $colorGreen;
font-size: 31px;
padding-right: 0.5em;
position: absolute;
top: 13px;
left: 28px;
#include for-tablet {
left: 19px;
}
#include for-phone {
top: 14px;
left: 36px;
}
}
}
What I am doing wrong here?
if you forget to add the font-awesome css liberary, Plz add the link in the head tag of your HTML as
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
I think it will work for you
When icon is showing as a square it reflect that it is not linked properly.
You can either link your icons via cdn using this link cdn icons link
or you can choose to download icons as png images and use them to your work
http://fa2png.io/
Related
I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don't know if that's because the font just won't work with the site or not.
Here is what I currently get:
The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.
However, that didn't work. Any suggestions?
My hero code and CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: black;`enter code here`
}
img{
opacity: 50%;
}
.croppedbanner {
width: 100%;
height: 200px;
object-position: 0% 39%;
object-fit: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
div.hero-text{
font-family: khFont;
letter-spacing: 5px;
font-size: 55px;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
transform: translate(0px, -200px);
margin-left: 10px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: red;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
EDIT 1: Ok so I managed to get different colors that aren't black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome - is in Light Mode and Opera GX - is in Dark Mode. The dark mode one I can't turn off.
Here's a screenshot of the website with both browsers.
Opera:
Chrome:
I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can't share the site.
Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free :)
i think i can give a helpful solution for you.
First, let me try to show you about how to use css selector while coding a web page.
There was more than one selector that we can use.
For this case, i should recommend you to using class selector, or maybe child selector.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
/*With child combinator selector*/
div > .hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For the documentation of using selector, you can read more in this link.
And the second is, let's start to edit the class to fixing the output in the interface.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
display: block;
margin: 0 auto;
text-align: center;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For more details, you can read in these documentations:
Display Docs
Text Align Docs
Margin Docs
Thank you
It's been resolved! Turns out, in Opera, you can enable "Force Dark Pages" which I thought it would change when I clicked the setting on the page. When working with local sites, you wont be able to change the setting on the page itself, you have to go into the browser settings.
Thanks everyone for your help! :)
for my project I use some external css from devextreme. Now, I would like to override some rules. For this I inspected the external css and found the class to override. I use the css files like this:
<link href="~/css/devextreme/dx.greenmist.css" rel="stylesheet" />
<link href="~/css/customized.css" rel="stylesheet" />
In the customized.css I change a property:
.dx-treeview-toggle-item-visibility {
font: 14px/1 DXIcons;
font-size: 22px;
text-align: center;
line-height: 22px;
color: #333;
width: 21px;
height: 32px;
top: 0;
right: 0px; /*new property instead of left: -4px*/
}
If I run the app, I see, that the topmost rule is this customized rule, but there is the original rule too and my customized rule isn't applied (see the picture):
Why is my custom css rule not applied?
left and right are two different properties. Try to add:
left: auto;
to your custom style.
This question already has answers here:
Using Font Awesome icon for bullet points, with a single list item element
(7 answers)
Font Awesome 5 shows empty square when using the JS+SVG version
(3 answers)
Closed 4 years ago.
Hi i am trying to add the font awesome icon in before and after elements.But i do not know how to write its css and how to get font awesome icons links to put it in the after before css.
I have created a structure like this.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<style>
.thish{position:relative; height:150px; width:150px ; background:red; }
.thish::before{position:absolute; content:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
</style>
<body>
<div class="thish">
</div>
</body>
</html>
Add to to your before pseudo selector
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
To get the value of content, go to their website,
Right-click -> Inspect any icon (<i> ::before </i> tag) and then check the value of the content in the before pseudo selector.
Dont forget to put the value of font
normal normal normal 14px/1 FontAwesome;
This is very important.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<style>
.thish {
position: relative;
height: 150px;
width: 150px;
background: red;
}
.thish::before {
position: absolute;
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
right: 40%;
color: #000;
bottom: 0;
height: 30px;
width: 60px;
background: green;
z-index: 1;
}
</style>
<body>
<div class="thish">
</div>
</body>
</html>
For Fontawesome 4
You just have to add the following CSS to your after or before element:
font: normal normal normal 14px/1 FontAwesome;
content: '\f042';
Here the content is the icon you want to add. Just copy the Unicode of the icon from the FA website and paste it in the content with a \ prefix.
.thish {
position: relative;
height: 150px;
width: 150px;
background: red;
}
.thish::before {
position: absolute;
font:normal normal normal 14px/1 FontAwesome;
content: '\f042';
right: 40%;
color: #000;
bottom: 0;
height: 30px;
width: 60px;
background: green;
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="thish">
</div>
I have a website that is created in Wordpress Delegate Theme. I want to insert a snow animation effect in background of the website (all website pages). I tried to include the snow.php in the index.php but the page template becomes broken.
This is my snow.php (I got it from Falling Snow Effect)
CSS:
#snowflakeContainer
{
position: absolute;
left: 0px;
top: 0px;
}
.snowflake
{
padding-left: 15px;
font-family: Cambria, Georgia, serif;
font-size: 14px;
line-height: 24px;
position: fixed;
color: #FFFFFF;
user-select: none;
z-index: 1000;
}
.snowflake:hover
{
cursor: default;
}
This is my HTML codes
<!-- div for snow -->
<div id="snowflakeContainer">
<p class="snowflake">*</p>
</div>
<!-- Javascript for snow -->
<script src="http://www.kirupa.com/js/fallingsnow_v6.js"></script>
<script src="http://www.kirupa.com/js/prefixfree.min.js"></script>
I need a help in inserting it in the website without template/page broken. Please guide me in what to do and what php file should I edit and insert this snow.php.
Hey guys I am having trouble styling my navigation so that is will always be at the same position on a page no matter the browser....
I have the following:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 35em;
top: 4.7em;
right: 0;
}
This is positioned, exacly where I want it in chrome and firefox but not in IE. Also if I change resolution it changes the positioning a little. I want to know how I can always have it at the same spot it is suppose to.
Let me know if you need anything else!
David
update:
http://jsfiddle.net/MVpkP/ - is the styles that I have in it and the layout.
The one above this is Chrome and the one I want it to remain like, that's how I want it styled.
Put this in your header
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
Create an additional css file for IE and adjust your IE css accordingly.
you should either use % on your left/right/top, or put this element inside another element.
for example:
#Mainmenu {
width: 44%;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .9em;
list-style: none;
position: absolute;
left: 3%;
top: 1.5%;
right: 0;
}
As for putting it in another element:
#wrap{
width: 700px;
margin:0 auto;
}
<div class="wrap">
your menu stuff...
</div>
either of those should solve your problem