I am trying to manually stack Soundcloud icon and show it on a square as it is with fa-facebook-square, but my Soundcloud icon get created under the square.
This is my code so far:
<div class="row">
<ul style="list-style-type: none; margin: 0px; padding-left: 20px;">
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #ff3a00">
<i class="fa fa-square fa-1x" style="font-size: 14px; position: relative; z-index: 10"></i>
<i class="fa fa-soundcloud fa-1x fa-inverse" style="font-size: 8px; position: absolute; z-index: 11; margin-top: 3px; margin-left: 1px"></i>
</div>Soundcloud
</li>
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #3b5998;">
<i class="fa fa-facebook-square"></i>
</div>Facebook
</li>
</ul>
</div>
Preview: http://jsfiddle.net/gvdr7889/
If there is any other alternative/easier way, I am open for your suggestions.
Instead of setting margin-top and margin-left, use top and left. I used 5px and 7px, but you can adjust it to get the positioning you like.
http://jsfiddle.net/gvdr7889/1/
Look at this fiddle.
What I've done is change it so that the div you made is the background, which has the orange-red color, the size and the border radius. Then the normal fa-soundcloud fa-1x fa-inverse in it in white. Might have to play around with the sizes and colors, but it seems to me like that is what you're looking for.
There is also a Github issue requesting a proper soundcloud-square icon, I'd suggest letting them know you want it too over there
Related
I have the following script in my html file:
<template name="SideNav">
<header>Lammah</header>
<body>
dd
</body>
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
And below is the .css file:
.nav {
border-radius: 5px 5px 0px 0px;
overflow: hidden;
background-color: #b7b7e5;
position: fixed;
bottom: 0;
width: 100%;
}
.nav a {
float: left;
width: 25%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover{
background-color: #A3A3CC;
}
When I run the html file, the nav class doesn't start from the beginning of the screen, there is small white space on the left as it is shown in the picture below:
the result
What is causing the nav class to not start from the beginning of the screen (bottom left)?
When I run the html file, the nav class doesn't start from the beginning of the screen, there is
This is because by default the client/main.css contains the following lines:
body {
padding: 10px;
font-family: sans-serif;
}
You should remove it in order to remove the white space.
Furthermore some additions on your Template:
The head and body should only be in your client/main.html while the body content will be rendered using the templates. This is, because Blaze is focused to develop single page applications.
So your code client/main.html may be like the following:
<header>
<title>Lammah</title>
</header>
<body>
{{> SideNav }}
</body>
<template name="SideNav">
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
The default margins and padding are still in place. What you will need is to make sure the parent element has margins and padding set to 0. So for example, the very first css element you will want to set based off your above code would be this:
template {
margin: 0;
padding: 0;
}
try this one
margin: 0 !important;
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%;
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>
I am trying to create the following control with HTML / CSS. I need advice on the best way to implement this with solely HTML and CSS. I was able to implement it using different anchor () tags. But I am not sure that this is the best approach since it all has the same purpose.
The link, blue circle, and cart icon should take you to a different page.
Also - for the icon I am implementing font-awesome. http://fortawesome.github.io/Font-Awesome/icons/
Any advice and suggestions would be appreciated!
Here is a picture:
Here is my HTML so far - but I dont think it's the best approach...
<div id="check_out_utility" class="float_right">
<a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
<div id="shopping_cart" class="float_right">
<i class="fa fa-shopping-cart fa-3x white_color"></i>
</div>
</div>
Again, thanks
You may use absolute positioning within the cart icon.
I build a quick example from scratch
HTML:
<a class="cart" href="#">
Checkout
<span class="fa fa-2x fa-shopping-cart">
<span class="badge">3</span>
</span>
</a>
CSS:
.cart {
background-color: #2F4178;
display: inline-block;
width: 200px;
height: 20px;
text-decoration: none;
color: #FFF;
padding: 20px;
}
.cart .fa {
position: relative;
}
.cart .badge {
display: inline-block;
background-color: #478BFF;
border-radius: 50%;
padding: 3px;
color: #FFF;
width: 10px;
height: 10px;
text-align: center;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
fiddle: http://jsfiddle.net/jqac30Lz/