I am hosting on awardspace and am trying to show font awesome icons. While developing in localhost everything worked fine.
<link rel="stylesheet" type="text/css" href="http://spaiosos.de/library/font-awesome-4.3.0/css/font-awesome.min.css">
<i class="fa fa-send"></i>
I also tried with only library/font-awesome-4.3.0/css/font-awesome.min.css still not working though. Also strange was that my .png images weren't showing up so I just uploaded them separately in awardspace and they showed up. Tried the same with the fa folders but it's not working.
I tried opening the link in the href but no page can be found
try using different CDN like https://cdnjs.com/libraries/font-awesome
Working example using social media icons:
<!-- FontAwesome Icons (Start) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
.fa {
color: #666 !important;
font-size: 24px;
margin-left: 15px;
}
.fa:hover {
color: #000 !important;
}
.social_icons a:nth-child(1) i {
margin: 0;
}
</style>
<div class="social_icons">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
</div>
<!-- FontAwesome Icons (End) -->
Related
I'm trying to style the FA icon fab fa-github in CSS. While the icon shows, no styling shows/changes to the icon, Here's what I'm using. Thank you.
HTML
<i class="fab fa-github"></i>
CSS
.fa-github {
color: rgb(255, 81, 0);
font-size: 150px;
}
Make sure you have the correct cdn link for fontawesome because everything is working just fine
here:
.fa-github {
color: rgb(255, 81, 0);
font-size: 150px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fab fa-github"></i>
I have a footer at the bottom of my website which contains some fontawesome icons:
I have made the icons hoverable, but how can I make them take me to a website (such as GitHub for the GitHub icon)?
Demo of what I have so far:
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
i:hover {
color: #AEC6CF;
transition: 0.4s;
cursor: pointer;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class='footer'>
<i class="fab fa-github" style='font-size:30px'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<i class="fab fa-github" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
Edit:
If i use <i class="fab fa-github" style='font-size:30px'></i> as suggested, while it works, I now have a icon in a permanent state of active: How can i stop this from happening?
Edit 2:
The solution was to just specify the color for a link. Thanks for the suggestion CBroe.
a:link, i {
color: black;
}
You could use the HTML anchor tag to link to either a URL. Change your HTML to this, it should solve your problem.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class='footer'>
<i class="fab fa-github" style='font-size:30px'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
You can put font awesome icons in an anchor tag with a href.
<i class="fab fa-github" style='font-size:30px'></i>
I would like to create a space between my fa icons and text but fa-fw isn't working and neither is.i {margin-left: 10px;}
Html:
<div class="logos1"><i class="fa fa-search">logos</i></div>
HTML
<div class="logos1">
<i class="fa fa-search">
<span class="padding">logos</span>
</i></div>
CSS
.padding{
padding-left:10px;
}
You are writing text between the i tag. This is not a good practice. You can achieve your goal using below code.
i{
margin-right: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<div class="logos1"><i class="fa fa-search"></i>logos</div>
font awesome icon is getting cut off on the left hand side.
Snapshot
Below is my code
<div class="media-left">
<i class="fa fa-search fa-5x text-white"></i>
</div>
Css
.media-left{
display: table-cell;
vertical-align: top;
}
.text-white {
color: #fff;
}
.fa-5x {
font-size: 5em;
}
It might resolve your issue letter-spacing: 1px;
It might be because you have used 5x big font
you can use little search icon as well
<div class="media-left">
<i class="fa fa-search fa-4x text-white"></i>
</div>
It might resolve your issue
Since you're using display: table-cell; the icon itself isn't or atleast shouldn't be causing this. It could be another table-cell causing this or maybe something else. Since i can't say what is causing it because you haven't provided your other code i can only help you out with maybe another solution.
Since you want the icon to be around a single square how about using display: inline-block See the snippet below:
.media-left{
display: inline-block;
vertical-align: top;
background-color: black;
}
.text-white {
color: #fff;
}
.fa-5x {
font-size: 5em;
}
<head>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Fonts en Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- JQuery and Bootstrap.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="media-left">
<i class="fa fa-search fa-5x text-white"></i>
</div>
Hope this helps!
There is the main restriction of font icons: it should be used only with specific font sizes for avoiding artifacts
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
As mentioned #Dmitro it might help if you are using not guaranteed font sizes or using dynamic scaling of your content
letter-spacing: 1px;
Also additionally next CSS adjustment might help too :
transform: rotate(0.03deg);
I am trying to POST to a server using <button type="submit"> save </button> but I need to style the button to look a certain way using css.
Here is what im trying to accomplish:
But this is what i get:
I need to style the button element to look like the correct image and remove the default button styles.
CSS
.inner-button
{
color: #008db8;
}
.inner-button:hover
{
color: #ad9961;
cursor: pointer;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="inner-button" type="submit" >
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x img-responsive"></i>
<i class="fa fa-floppy-o fa-stack-1x fa-inverse img-responsive"></i>
</span><br />
<b>Save</b>
</button>
You just have to remove the default CSS styling.
.inner-button {
background: none;
border: none;
margin: 0;
padding: 0;
}