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;
}
Related
I am learning HTML and CSS. I am practicing by designing some pages but I got a problem. I tried many ways but couldn't fix it. I want to add a space between the icon and the text so that they lock more beautiful.
Image:
CSS:
.facebook {
background: blue;
padding: 0.8rem;
padding-left: 4.1vw;
padding-right: 4.1vw;
margin-left: 0vw;
border-radius: 10px;
}
.facebook:hover {
opacity: 0.5;
}
.google {
background: red;
padding: 0.8rem;
padding-left: 4.6vw;
padding-right: 4.6vw;
margin-left: 3vw;
border-radius: 10px;
}
.google:hover {
opacity: 0.5;
}
HTML:
<div class="login-with">
<i class="fab fa-facebook">Facebook</i>
<i class="fab fa-google">Google</i>
</div>
Can you please help me to fix it. When I add a space manually the link text go to below the icon.
Full Codes link:
CSS: Full Code
HTML: Full Code
Try one of the below methods as mentioned in Fontawesome examples page
Text outside i tag, and add a space in between
<i class="fab fa-facebook"></i> Facebook
Use , below code is from Fontawesome site
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
If you dont want to change your markup(html) use the below CSS
.login-with > a i::before {
padding-right: 15px;
}
People usually keep the icon element as an empty node and put the text content after it. Then you add a margin to the icon to get appropriate spacing:
.facebook .fab { margin-right: 1em }
<a href="..." class="facebook">
<i class="fab fa-facebook"></i>
<span>Facebook</span>
</a>
The <span> tags are technically not necessary, but it is common to avoid text-only nodes.
Use space or   between text and icon. Also plz put ; after  
Place service name outside i tag.
You can add margin-right: 10px; styling to i element,
or display: flex; justify-content: space-between; to the a tag.
It would be best to set a base class for the social icons
/* set base class */
.social-btn {
padding: 0.8rem 4.1vw;
border-radius: 10px;
color: white;
background: gray;
text-decoration: none;
font-family: sans-serif;
}
/* space the buttons */
.social-btn + .social-btn {
margin-left: 1rem;
}
/* set icon padding */
.social-btn i {
padding-right: 0.5rem;
}
/* Modifiers */
.facebook-btn {
background: blue;
}
.google-btn {
background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<i class="fab fa-facebook"></i>Facebook
<i class="fab fa-google"></i>Google
In Bootstrap you can use me which represents margin from end in icon
<button type="button" class="btn btn-primary"
style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
Sample Code:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<center>
<button type="button" class="btn btn-primary" style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
<br><br>
<button type="button" class="btn btn-secondary" style="width:150px;"><i class="bi bi-gear-fill me-3"></i>Settings</button>
<br><br>
<button type="button" class="btn btn-info" style="width:150px;"><i class="bi bi-person-circle me-3"></i>Profile</button>
</center>
</body>
</html>
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;
}
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%;
The icons inside my buttons are half outside of them for some reason even though there's definitely enough room inside for them. Why is this and how can I fix it? Also, with my css I have the buttons set to be blue but whenever they're disabled, the buttons are white. How can I have them not change their color when they're disabled? Thanks!
tfoot,
thead {
background-color: blue;
color: white;
}
i {
color: white;
vertical-align: middle;
}
button {
background-color: blue;
}
.footertext {
float: right;
padding-left: 10px;
padding-right: 10px;
}
<td colspan="6">
Requests:
<button [disabled]="!isNextValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>
<label style="float: right;">{{selectedEmployee+1}} of {{empInfo.length}}</label>
<button [disabled]="!isPreviousValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="previousEmployee()"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></button>
</td>
It is because you are using a fixed width on your button element. Instead of a fixed with, adjust the size using padding. This will allow your button to scale properly for its content. This will also keep the label and icon centered properly in the button.
Something like this:
<button [disabled]="!isNextValid()" class="form-control" style="padding: 15px 30px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>
Buttons are fine until I resize window to be very small or in my case, look at the site on a small screen device such as mobile phone.
I want two different scenarios. One in which an area holds buttons that are equal in width but then when I size the window down the contents of the button spill out of the button.
I also want another area that has buttons that adjust to the size of the text. In this scenario, the text does not spill out of the buttons but now the buttons are spilling out of the div area.
I was trying everything I could think of which is why one area uses and the other uses <button></button>
Both scenarios are in the fiddle http://jsfiddle.net/leopardy/VFNmC/
The code from the fiddle:
html
<div class="combo">
<div id="button-area-1">
<div>txt <span class="glyphicon glyphicon-circle-arrow-right"></span></div>
<div>txt txt <span class="glyphicon glyphicon-circle-arrow-right"></span></div>
<div>txt txt txt <span class="glyphicon glyphicon-circle-arrow-right"></span></div>
<div>txt txt txt txt <span class="glyphicon glyphicon-circle-arrow-right"></span></div>
</div>
<div id="button-area-2">
<button type="button" class="btn btn-default btn-xs btn-has-width">hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
<button type="button" class="btn btn-default btn-xs btn-has-width">hi hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
<button type="button" class="btn btn-default btn-xs btn-has-width">hi hi hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
<button type="button" class="btn btn-default btn-xs btn-has-width">hi hi hi hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
</div>
</div>
css
.combo {
position: relative;
width: 100%;
height: 400px;
background-color: blue;
}
#button-area-1 {
position:absolute;
top:40%;
left:60%;
z-index: 2;
background-color: #606060;
background-color: rgba(96,96,96,0.5);
border: 1px solid grey;
outline: 1px solid darkgrey;
width: 30%;
padding-top: 1%;
padding-bottom: 1%;
}
#button-area-2 {
position:absolute;
top:5%;
left:60%;
z-index: 2;
background-color: #medium-gray;
background-color: rgba(96,96,96,0.5);
border: 1px solid grey;
outline: 1px solid darkgrey;
width: 30%;
padding-top: 1%;
padding-bottom: 1%;
}
.btn-no-width {
margin-top:1%;
margin-left: 10%;
margin-right: 10%;
-webkit-font-smoothing: antialiased;
background-repeat: repeat-x;
}
.btn-has-width {
width: 80%;
margin-top:1%;
margin-left: 10%;
margin-right: 10%;
-webkit-font-smoothing: antialiased;
background-repeat: repeat-x;
}
You need to set min-width(150px should do for your example) for #button-area-1 and #button-area-2. But keep in mind this doesn't work on IE6 or less (not like it's still in use).