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;
}
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 just wants to display a font awesome icon and text in a line:
<th>
<span>
<a>
<i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</span>
<span> Add Task</span>
</th>
It's working but the problem is =>
If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?
Target the element containing the font-awesome icon. Set position as relative and adjust top value;
a {
text-decoration: none;
font-family: Arial;
color: #333;
}
/*Example 1*/
i {
color: green;
vertical-align: sub;
font-size: 50px;
}
i::before {
font-size: 30px;
}
/*Example 2*/
span {
color: green;
font-size: 50px;
position: relative;
top: 4px;
}
span::before {
font-size: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--Example 1-->
<a href="#">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>
<br>
<!--Example 2-->
<a href="#">
<span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>
Example Code Pen: https://codepen.io/Omi236/pen/KqbQoO?editors=1100
In your case, you just need to use font size property at parent level.
Working example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a style="font-size:16px;"><i class="fa fa-plus-circle"style="color:green;"></i><b> Add New</b></a>
</body>
</html>
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) -->
I have a "ugly" issue with font-awesome, when I place a icon-link (icon inside a link) in front of a text. By hovering the icon, the icon itself will not get underlined but somehow the space between the text and the icon.
Somehow the text-decoration css rule from the link (underline while hover) collides with the one coming from the icon in this strangely appearing space.
How can I get rid of this underline in the space and have no decoration at all in the end?
(when possible without adding a class to the link element nor using JS)
Here is a code snippet that may help you.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
Fiddle: https://jsfiddle.net/kg6zdxu5/
Apparently your <a> tag and your <i> tag will not render a space if you write them in a single line. Avoiding line break between these two elements fixes your issue.
Code Snippet:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>
<i class="fa fa-wrench"></i>
Text of Title
</h1>
EDIT:
Usually it is better if you do not change the default display value of an element, but here you can use display: inline-block; in your <a> tag to remove that space.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
Not necessarily question-related but I stopped using icon fonts a while back and adopted SVG icons, which, in my opinion, are way better.
Here's a good article on making the switch, and here's another on how to use them.
DEMO:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
color: purple;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-wrench {
width: 0.939453125em;
}
<h1>
<a href="#">
<svg class="icon icon-wrench">
<use xlink:href="#icon-wrench"></use>
</svg>
</a>
Text of Title
</h1>
<svg style="display:none;">
<symbol id="icon-wrench" viewBox="0 0 30 32">
<title>wrench</title>
<path class="path1" d="M6.857 26.286q0-0.464-0.339-0.804t-0.804-0.339-0.804 0.339-0.339 0.804 0.339 0.804 0.804 0.339 0.804-0.339 0.339-0.804zM18.357 18.786l-12.179 12.179q-0.661 0.661-1.607 0.661-0.929 0-1.625-0.661l-1.893-1.929q-0.679-0.643-0.679-1.607 0-0.946 0.679-1.625l12.161-12.161q0.696 1.75 2.045 3.098t3.098 2.045zM29.679 11.018q0 0.696-0.411 1.893-0.839 2.393-2.938 3.884t-4.616 1.491q-3.304 0-5.652-2.348t-2.348-5.652 2.348-5.652 5.652-2.348q1.036 0 2.17 0.295t1.92 0.83q0.286 0.196 0.286 0.5t-0.286 0.5l-5.232 3.018v4l3.446 1.911q0.089-0.054 1.411-0.866t2.42-1.446 1.259-0.634q0.268 0 0.42 0.179t0.152 0.446z"></path>
</symbol>
</svg>
If I understood you correctly, you want to remove the unnecessary underline you have and add this underline under the icon.
Just remove the a:hover and replace it with i:hover, and that should do the trick.
a {
text-decoration: none;
}
.fa-wrench:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
Simply remove a:hover and add .fa-wrench:hover.
h1 {
font-size:2.5em;
}
a {
text-decoration: none;
}
.fa-wrench:hover{
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Test Title
</h1>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
Usually this problem pops up when you have multiple font awesome icons, for example, below we have 2 icons:
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
The key class is text-decoration-none, which you define in your style sheet as follow:
.text-decoration-none:hover{
text-decoration: none;
}
In this way, while hovering, your font awesome icon won't show an underline. It overwrites your a:hover. Keep in mind that you need <span></span> tags to achieve this...
so you need a new :hover class plus <span> tags.