I have some circular icons with border in my website, but when I hover the mouse over the icon, I can see the pointer (and get into the link) from outside the icon.
I've tried the solution offered here, but it didn't help. Does anybody have a suggestion?
HTML code:
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<div class="margin-icons">
<a class="btn btn-outline-light btn-social mx-1" target="_blank" href="mailto:example#example.com">
<i class="far fa-envelope" style="color: black;
width: 50px; height: 50px;
border: 2px solid black;
border-radius: 50%;
padding: 6px;" />
</a>
</div>
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<div class="margin-icons">
<a class="btn btn-outline-light btn-social mx-1" target="_blank">
<i class="far fa-envelope" style="color: black;
width: 50px; height: 50px;
border: 2px solid black;
border-radius: 50%;
padding: 6px;" />
</a>
</div>
So you don't want the pointer to come then just remove href in the 'a' tag.
But Why do you the three icons?
Related
I am noob at css. Can someone show me how to properly align this text and icons from above and below?
I don't know how to go about it...
I have example of my code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<style>
button {
border-radius: 4px;
text-align: center;
padding: 5px 10px;
}
button::before {
display: block;
}
</style>
<button class="fas fa-undo" onclick="onUndo()" style="margin-left: 5px; margin-bottom: 2px;">Undo</button>
<button class="fas fa-redo" onclick="onRedo()" style="margin-left: 5px; margin-bottom: 2px;">Redo</button>
<button class="fas fa-table" id="btnCreateTable" style="margin-left: 5px; margin-bottom: 2px;">Add table</button>
<button class="fas fa-edit" id="btnRenameTable" style="margin-left: 5px; margin-bottom: 2px;">Rename table</button>
<button class="fas fa-trash-alt" id="btnDeleteTable" style="margin-left: 5px;margin-bottom: 2px;">Delete table</button>
<button class="fas fa-plus" id="btnAddRow" style="margin-left: 5px; margin-bottom: 2px;">Add row</button>
<button class="fas fa-pen-square" id="btnEditRow" style="margin-left: 5px; margin-bottom: 2px;">Edit row</button>
<button class="fas fa-minus" id="btnDeleteRow" style="margin-left: 5px; margin-bottom: 2px;">Delete row</button>
<button class="fas fa-sitemap" id="btnInfo" style="margin-left: 5px;">Connection info</button>
but this looks really strange on that compiler. The real look is here:
As you can see this is not center of button. Can someone help?
I have created a fixed footer for my website:
HTML
<div class="card footerBF">
<div class="card-body space-around">
<button
type="button"
class="buttonBF"
routerLink="/myRouter"
>
<i class="fa fa-lock fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button" class="buttonBF" routerLink="myRoute">
<i class="fa fa-plus fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
CSS
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
}
.buttonBF {
background-color: white;
color: grey;
display: inline-block;
border: none;
cursor: pointer;
}
The problem is that when I scroll, my footer moves, even though is supposed to be fixed. I attach one picture to show this effect:
There are Bootstrap UI elements for the a fixed bottom navbar, each with props to do this... check out Fixed bottom
<nav class="navbar fixed-bottom">
// Buttons
</nav>
However, if you want your current code from the question to work as intended. I'd just set the footer with display: flex, give it a height and justify-content and align-items center.
body {
background: black;
height: 2000px;
}
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #f1f1f1;
}
button {
background-color: white;
border: none;
cursor: pointer;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<body>
<div class="card footerBF">
<div class="card-body">
<button type="button">
<i class="fa fa-lock fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-plus fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
</body>
I am creating a horizontal navigation with an icon and text for each navigation item. I am running into an issue with items that contain two lines of text vs one.
I have tried modifying the padding and height of the div that extends higher than the others, but to no avail. How can I modify this to achieve a consistent height across all navigation items regardless of lines of text?
View the fiddle: Here
<div id="dashboard">
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
<a class="actions" href="#"">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
.actions:first-child div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.actions:last-child div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions > div {
display: block;
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 0;
margin: 0 -6px 20px 0;
width: 12.5%;
text-align: center;
display: inline-block;
}
.actions > div:hover {
background-color: #f2f2f2;
}
.actions > div i {
width: 1em;
font-size: 2em;
}
A flexbox solution might look something like this:
#dashboard {
display: flex;
}
div:first-child>.actions>div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:last-child>.actions>div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions>div {
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 15px;
text-align: center;
}
.actions>div:hover {
background-color: #f2f2f2;
}
.actions>div i {
width: 1em;
font-size: 2em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="dashboard">
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
</div>
<div>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
</div>
I've problem with responsiveness when i've stacking button with float class. i want all my buttons stick at the end of the content.
body {
background-color: #eeeeee;
}
.bg-a {
background-color: #bbb;
color: #fff;
padding: 3 6px;
margin: 0 5px;
}
#img-top1,
#img-top2,
#img-top3 {
border-radius: 0;
}
header .container .row div a.ss {
padding: 5px 35px 10px 35px;
}
#img-top1 {
border-radius: 0 0 20px 0;
}
#img-top3 {
border-radius: 0 0 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<img id="logo" src="images/logo.png" style="margin-top: 15px;">
</div>
<div class="col-sm-12 col-md-6" style="padding: 0;">
Primary link1
Primary link2
Primary link3
<br style="clear: both;"><br>
<h4 style="background-color: skyblue; clear: both;">
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-glide-g"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
<a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a>
</h4>
</div>
</div>
</div>
</header><br>
The button with id img-top is not responsive, meanwhile the icon button with the same class is responsive (maybe because of the small size). How can i make it responsive?
the example of web : RHT Academy
I have a comment icon that I want to display the number of comments and the word "Comments" next to it.
But the word "Comments" should be displayed under the number and not next to it.
Similar to this
So far the text is being displayed next to each other.
DEMO https://jsfiddle.net/halnex/d5sft5pt/9/
HTML
<div class="post-meta-alt">
<div class="social-share-top">
<span class="social-share-top-text">Share</span>
<a class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook"></span>
</a>
<a class="btn btn-social-icon btn-twitter">
<span class="fa fa-twitter"></span>
</a>
<a class="btn btn-social-icon btn-google">
<span class="fa fa-google"></span>
</a>
<a class="btn btn-social-icon btn-pinterest">
<span class="fa fa-pinterest"></span>
</a>
</div>
<div class="comments-top">
<a class="btn btn-social-icon btn-pinterest">
<span class="fa fa-comment"></span>
</a>
<p>78</p>
<p>Comments</p>
</div>
<div class="author-top">
author name
</div>
</div>
CSS
.post-meta-alt {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 20px 0;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
}
.post-meta-alt span.social-share-top-text {
text-transform: uppercase;
margin-right: 10px;
}
.post-meta-alt .comments-top,
.post-meta-alt .author-top {
display: inline-flex;
margin-left: 20px;
}
PS: Is this the correct way of doing it with Bootstrap? Using Flexbox or is there a better conventional way of achieving this?
You need to wrap the paragraphs in a div:
<div class="coment">
<p>78</p>
<p>Comments</p>
</div>
And add style to organize them
.coment p {
margin: 3px;
line-height: 1;
}
See jsfiddle