I have some divs with background color and i want to add font-awesome icon over it. The icon is not shown and when i inspect the elements aria-hidden="true" is added in the html tag automatically... How can i deal with the issue.
<div class="">
<div class="service-1">
<i class="fas fa-coffee"></i>
</div>
<p class="mt-2 ml-4">
Lorem Ipsum
</p>
</div>
When i inspect the elements the tag changes to the following:
<i class='fas fa-coffee' aria-hidden='true'></i>
The css for the elements are:
.service-1{
width: 138px;
height: 138px;
background: #EDE10D 0% 0% no-repeat padding-box;
border-radius: 50%;
}
.service-1 > i{
color: #fff;
height: 130px;
width: 130px;
}
Related
I was trying to make an animated sidebar with hover, when the mouse goes over the sidebar list item a colored box slides in from the side. For this purpose I used the :after pseudo element to use as the sliding box however it covered the text of the list item. To fix this I set the z-index value of the :after pseudo element to -1. As soon as I made the change the transitions broke, they ease-in without a problem but as soon as the mouse leaves the area, the colored box jumps back immediately without an exit transition. The only thing that works is when keeping the mouse inside of it's parent.
Here's the html
<nav id="sidebar">
<div class="list-group-flush" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action sidebar-item active" href="/home">
<div class="sidebar-item-content">
<i class="fas fa-home sidebar-item-icon"></i>
<span class="sidebar-item-text">Home</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/trending">
<div class="sidebar-item-content">
<i class="fas fa-trophy sidebar-item-icon"></i>
<span class="sidebar-item-text">Trending</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/create_challenge">
<div class="sidebar-item-content">
<i class="fas fa-plus-circle sidebar-item-icon"></i>
<span class="sidebar-item-text">Create Challenge</span>
</div>
</a>
<a class="list-group-item list-group-item-action sidebar-item" href="/profile">
<div class="sidebar-item-content">
<i class="fas fa-user-circle sidebar-item-icon"></i>
<span class="sidebar-item-text">Profile</span>
</div>
</a>
</div>
</nav>
And here is the SCSS
#sidebar {
height: 100vh;
width: $left-bar-width;
padding-top: spacer(3);
position: fixed;
box-shadow: 0 0 $shadow-spread 0 $shadow-color;
z-index: 1;
clip-path: polygon(0% 0%, add($left-bar-width,$shadow-spread) 0%, add($left-bar-width,$shadow-spread)
100%, 0% 100%);
}
.sidebar-item-content{
padding: $sidebar-item-content-padding;
&:before{
content: '';
position: absolute;
bottom: $sidebar-item-padding-y;
right: $sidebar-item-padding-x;
transition: width 0.4s ease-out;
width: 0%;
height: subtract(100%,2*$sidebar-item-padding-y);
border-radius: $sidebar-item-content-roundness;
background-color: $sidebar-item-content-color;
z-index: -1;
}
&:hover{
&:before{
width: subtract(100%,2*$sidebar-item-padding-x);
}
}
}
.sidebar-item{
padding:
$sidebar-item-padding-y
$sidebar-item-padding-x
$sidebar-item-padding-y
$sidebar-item-padding-x;
&.list-group-item{
border: none;
}
&.list-group-item:hover,:focus{
background-color: initial;
color: initial;
}
&.active{
&.list-group-item{
z-index: initial;
background-color: initial;
color: initial;
}
.sidebar-item-content{
&:before{
width: $sidebar-item-active-width;
}
.sidebar-item-icon{
fill: $sidebar-item-content-color;
}
.sidebar-item-text{
color: $sidebar-item-content-color;
font-weight: bold;
}
}
}
}
Thanks in advance for the help, I admit I'm completely stumped on this one.
Fixed, the parent element had to have a z-index of 2, basically, parent z-index - 1 had to be greater than 0 which was not the case before.
I have a list of users, with two inline elements: a "contact me" button ('a' element with a fontawesome icon) and a tag showing the type of user (span element).
Not all users have a tag, and whenever there is a tag, the 'a' element is giving to the icon more width than it needs. This is how it looks like:
As you can see, the bottom one fits correctly, while the blue space of the top one is bigger on the right. They have the exact same classes and attributes (this is generated from a loop, so it's the same code).
This is the HTML code for the link+span:
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I tried checking if there was any difference in the cumputed styles of the two elements through javascript (maybe there was a ":last-child" selector somewhere), but their maps looks exactly the same (checked using getComputedStyle on both elements).
Whenever I change the span element display property to block, flex, or other not-inline options, the other element resize itself in the correct way.
The only option I found is to change the icon width to .8em (currently 1em), and then add a last-child selector to resize it correctly to 1em when there is no span on the right, but it's not a real solution...
Could anyone help me figure out why, or at least how to fix it?
Set the display on item-btn-contact to inline-block. Seems like the default display of a (inline) is messing with the sizing.
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
display: inline-block;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
I want to replace glyphicon-user in bootstrap button with a responsive png, is there any way to do this?
#SignUp-btn{
width: 100% !important;
height: 45% !important;
font-size: 20px;
background-color: #262262;
border-color: #262262;
}
<div class="col-sm-6">
<a href="SignUp" class="btn btn-sq-lg btn-primary" id="SignUp-btn">
<i class="glyphicon glyphicon-user fa-5x"></i>
<br><b> Sign Up</b>
</a>
</div>
See Attached
you can put the image as a background image on the "i" tag. See sample below.
#SignUp-btn + i {
background-image: url(image.png);
text-indent: -9999999999px;
height: 15px;
width: 15px;
}
I have been trying to add labels to the left of my FAB. I am liking the Material Design, but I am having an issue on getting the labels to appear properly. Any tips would be appreciated. Everything is displaying correctly except adding labels.
Here is a working example:
http://codepen.io/petja/pen/OVRYMq
HTML
<div class="backdrop"></div>
<div class="fab child" data-subitem="1">
<img alt="" src="images/smile.jpg">
</div>
<div class="fab child" data-subitem="2">
<img alt="" src="about/smile.jpg">
</div>
<div class="fab visible-xs float-phone" id="masterfab">
<i class="fa icon-phone soft-white"></i>
</div>
CSS
.fab {
background: #1C9E00;
border-radius: 50%;
text-align: center;
color: #FFF;
position: fixed;
right: 70px;
font-size: 25px;
padding: 9px 2.5px 6px;
-webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .42));
}
.fab span {
vertical-align: middle;
}
.fab.child {
width: 53.666667px;
height: 37.666667px;
display: none;
opacity: 0;
background: transparent;
border-radius: 0%;
right: 63px;
padding: 0;
}
.fab img {
border-radius: 50%;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FAFAFA;
opacity: 0.7;
display: none;
}
JS
$(function(){
$(".fab,.backdrop").click(function(){
if($(".backdrop").is(":visible")){
$(".backdrop").fadeOut(125);
$(".fab.child")
.stop()
.animate({
bottom : $("#masterfab").css("bottom"),
opacity : 0
},125,function(){
$(this).hide();
});
}else{
$(".backdrop").fadeIn(125);
$(".fab.child").each(function(){
$(this)
.stop()
.show()
.animate({
bottom : (parseInt($("#masterfab").css("bottom")) + parseInt($("#masterfab").outerHeight()) + 70 * $(this).data("subitem") - $(".fab.child").outerHeight()) + "px",
opacity : 1
},125);
});
}
});
});
You want something like this?
There is .backdrop class in your css So, when I try to add materialize tooltipped it has same class name .backdrop which responsible to change background color of tooltip.
You added background: #ECECEC; in .backdrop So, tooltips had also same background color. So, I changed your .backdrop to .backdrop_gray and Now everything is fine.
HTML
<div class="backdrop_gray"></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am C" data-subitem="1"><span>C</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am B" data-subitem="2"><span>B</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am A" data-subitem="3"><span>A</span></div>
<div class="fab" id="masterfab"><span>+</span></div>
<h1>Floating Action Button</h1>
<p>(Hint: Button interacts with you)</p>
JS
$('.tooltipped').tooltip({delay: 50});
... // Your other JS.
Working Codepen
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>