I want to make slim to 3 bars inside Hamburger. These 3 bars look fat when I apply "fa-2x".
Using code <i class="fa fa-bars"></i>
You can suscribe to pro licence to have acces to icon light style or you can use a custom svg.
Solid (free):
Light (pro):
Custom thin icon menu example
var faSplat = {
prefix: 'fac',
iconName: 'bars',
icon: [
448, 448, [],
null,
'M442 114H5a5 5 0 0 1-5-5V84a5 5 0 0 1 5-5h435a5 5 0 0 1 5 5v24a5 5 0 0 1-5 5zm0 160H5a5 5 0 0 1-5-5v-24a5 5 0 0 1 5-6h435a5 5 0 0 1 5 5v24a5 5 0 0 1-5 5zm0 160H5a5 5 0 0 1-5-5v-24a5 5 0 0 1 5-5h435a5 5 0 0 1 5 5v24a5 5 0 0 1-5 5z'
]
}
FontAwesome.library.add(faSplat)
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<i class="fac fa-bars fa-2x"></i>
<br/>
<br/>
<div style="background-color : black; padding: 10px">
<i class="fac fa-bars fa-2x fa-inverse"></i>
</div>
More information about custom icons in fontawesome : https://github.com/mlwilkerson/fa-custom-icon-demo
Related
I want to create a small Bootstrap dropdown, But I don't know how, Here's what it looks like
base.html:
<a class="text-light" data-bs-toggle="dropdown" aria-expanded="false">
<svg width="12" height="14" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</a>
<ul class="dropdown-menu dropdown-menu-dark bg-dark">
<li><a class="dropdown-item text-light" href="#">edit</a></li>
<li><a class="dropdown-item text-warning" href="#">report</a></li>
<li><hr class="dropdown-divider border-top border-secondary"></li>
<li><a class="dropdown-item text-danger" href="#">delete</a></li>
</ul>
As Cervus camelopardalis said in their answer, you should modify the dropdown since Bootstrap doesn't offer different sizes. I've just tried to make the dropdown look like the screenshot you posted as much as I could.
Since your code has some problems, I just used the official dropdown from Boostrap site. This is the latest version, I'll try to explain everything I did.
.btn {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: none !important;
}
.dropdown-menu {
min-width: 100px !important;
}
.dropdown-item {
padding: 0px 5px !important;
font-size: 12px !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg width="12" height="14" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</button>
<ul class="dropdown-menu dropdown-menu-dark bg-dark">
<li><a class="dropdown-item" href="#">edit</a></li>
<li><a class="dropdown-item text-warning" href="#">report</a></li>
<li><hr class="dropdown-divider border-top border-secondary"></li>
<li><a class="dropdown-item text-danger" href="#">delete</a></li>
</ul>
</div>
First of all, beside every CSS class, I added !important to override Bootstrap default stuff. In production, you should add your CSS file above Bootstrap CSS and then remove !important.
In the .btn class, I changed the width and height to 30px to change the size of the three dots button, also I removed padding as well as the borders to make it look nicer as the screenshot.
Thanks for Cervus camelopardalis, I used the same code to change the dropdown menu size.
I need to add a exit button to the top left corner of the modal, also I would like for the modal to disappear after the link has been copied. How would i go about doing this ?
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-100" viewBox="21 21" fill="currentColor">
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
<text x='35' y='18' style='fill:#444444' class='text-2xl'>Share Link</text>
</svg>
<br />
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<h1 class="text-left" id='text' style='user-select: all'><%= #vacancy.slug %>
<h2 class="text-right" id='text' style='user-select: all'>
<button onclick= "Copy(document.querySelector('#text').innerText)('#closemodal').click(function() {$('#modalwindow').modal('hide');});">
<svg class="align:right w-30 h-9" fill="none" stroke="currentColor" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
</svg>
</button>
</h2>
</h1>
</div>
</div>
<div class="text-center md:text-right mt-4 md:flex md:justify-end"></div>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script type='text/javascript'>
function Copy(text) {
var elem = document.createElement('textarea');
elem.value = text;
document.body.appendChild(elem);
elem.select();
document.execCommand('copy');
document.body.removeChild(elem);
Swal.fire({
position: 'center',
icon: 'success',
showConfirmButton: false,
timer: 600
})
}
</script>
</div>
I looked at the site for the library you're using, SweetAlert2 and here is what I found...
To add a close button, add showCloseButton: true to the object passed to Swal.fire()
https://sweetalert2.github.io/#configuration
To close the modal call Swal.close()
https://sweetalert2.github.io/#methods
I need to compress an input type date, so i've tried setting the width to 120px.The problem is that there's a space between the date numbers and the input date icon.
I need to decrease or remove that space:
Is there a way to do that?
My code (I'm using bootstrap 4 btw):
<input type="date">
You can use:
::-webkit-calendar-picker-indicator{
margin-left: 0px;
}
If this is not enough, and you want even less space, just put a negative margin, like in this snippet:
::-webkit-calendar-picker-indicator{
margin-left: -15px;
}
<input type="date" >
Note: This works in Chrome. Firefox (and possibly other browsers) may not show the icon by default.
You can target the icon by using the following css selector: ::-webkit-calendar-picker-indicator
To increase the margin, use:
input[type=date]::-webkit-calendar-picker-indicator {
margin-left: 100px;
}
<input type="date">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
To decrease the space, use a negative margin, or any other option.
Correct way to use icons on <input type="date"
with bootstrap 4
Boostrapt icon calandar : https://icons.getbootstrap.com/icons/calendar/
sample code:
input[type="date"]::-webkit-calendar-picker-indicator {
position : absolute;
left : 0;
margin : 0;
width : 2em;
transform: translateX(-2.5em);
opacity : 0;
}
form { margin:1em }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<form>
<div class="form-row align-items-center">
<div class=""> <!-- col-sm-3 my-1-->
<div class="input-group">
<div class="input-group-prepend">
<label for="DteInput" class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg></label>
</div>
<input type="date" class="form-control" id="DteInput" placeholder="">
</div>
</div>
</div>
</form>
of course, you have to fight a bit for the chrome icon interference
see:
Method to show native datepicker in Chrome
Method to show native datepicker in Chrome
I copied this card template from bootstrap for a warning card. At the header of the card, I'm using an svg that I got from Bootstrap's icons https://icons.getbootstrap.com/icons/exclamation-triangle-fill/. There, you can see some examples where the icon is implemented properly. The icon is aligned exactly in the middle next to the next. However, in my code the icon is aligned at the bottom and so is not centered. Is there a way to fix this?
<div class="card" style="width: 18rem;">
<div class="card-body">
<div class="mb-3">
<h5 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
Warning
</h5>
</div>
<p class="card-text">
Text of card
</p>
</div>
</div>
Use negative margin-top to adjust it.
For example:
<div class="card" style="width: 18rem;">
<div class="card-body">
<div class="mb-3">
<h5 class="card-title">
<svg class="myIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
Warning
</h5>
</div>
<p class="card-text">
Text of card
</p>
</div>
</div>
CSS:
.myIcon { margin-top: -5px; }
Check it here: https://jsfiddle.net/8t61qehn/
printf("%d\n", 42); /* You can simply add some css on style part in as follows: */
.card-svg {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.card-txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/*And add this styles as classes on your HTML code as follows: */
<img class="card-svg" src="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
<img>
<h5 class="card-txt">Warning</h5>
/By the way i changed the svg into img you can try like that if this is what you want./
My Result
Just change first DIV style with text-align: center
Check the image from above make sure that way you want show
drop like if work for you.
I'm trying to create a horizontal scrolling area with a sidebar, that is not scrollable. I want to create it without using position: fixed; but I can't make it work. What am I missing?
HTML
<div class="sidebar">
<h1 class="logo">Title</h1>
</div>
<div class="scroll-area">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi harum, magnam, ducimus corporis ipsam blanditiis possimus
voluptate obcaecati laboriosam dicta quidem perspiciatis ipsa
tenetur. Asperiores veritatis dicta doloremque. Ea, ad.
</p>
<div class="image-gallery">
<ul>
<li><img src="http://placehold.it/500x800"></li>
<li><img src="http://placehold.it/500x800"></li>
<li><img src="http://placehold.it/500x800"></li>
</ul>
</div>
</div>
CSS
.scroll-area {
width: 3000px;
overflow: scroll;
}
ul li {
display: inline;
}
EDIT
I've created a fiddle to visualize my issue. As it is now, the sidebar is scrolling together with the content.
Here is an example that achieves what I believe you're trying to do. Replace code as needed.
HTML:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch Report</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel"> Annuities Report</h4>
</div>
<pre class="report-pre modal-body report-modal-body">
INDIVIDUAL ANNUITIES
BY AGENCY WITH AGENT DETAIL
COMMISSIONABLE DEPOSITS
MONTH TO DATE
AGENCY NUMBER
AGENCY NAME FLEXIBLE ANNUITY SPIA SPDA VARIABLE ANNUITY TOTAL
AGENT #
AGENT NAME COUNT 1ST YEAR EXTERNAL INTERNAL SUBSEQUENT TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL SUBSEQUENT TOTAL COUNT 1ST YEAR EXTERNAL INTERNAL SUBSEQUENT TOTAL
----------------------------------------------------------------- ------------------------------------------------------ ------------------------------------------------------ ----------------------------------------------------------------- ----------------------------------------------------------------
EN00000006
POE - James
AG00000001
POE, Henry 1.00 2,512 25,812 0 450 28,775 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 1,741 1,741 1.00 2,512 25,812 0 2,191 30,516
AG00050001
Eve, .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 52 0 0 3,081 3,133 .00 52 0 0 3,081 3,133
AG000400
Bob, .00 30 0 0 100 130 .00 0 0 0 0 .00 0 0 0 0 .00 166 0 0 370 536 .00 196 0 0 470 666
1.00 2,542 25,812 0 550 28,905 .00 0 0 0 0 .00 0 0 0 0 .00 218 0 0 5,192 5,410 1.00 2,760 25,812 0 5,742 34,315
EN00000010
LOST AGENT
AG00005
Jim, RI .00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 100 100 .00 0 0 0 100 100
.00 0 0 0 0 0 .00 0 0 0 0 .00 0 0 0 0 .00 0 0 0 100 100 .00 0 0 0 100 100
</pre>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-dialog -->
</div>
CSS:
.report-modal-body {
max-height:calc(100vh - 150px);
overflow-y:auto;
overflow-x:auto;
}
.report-pre {
width:100%;
overflow-x:auto;
word-wrap:normal;
margin:1px;
}
Fiddle
Try This
white-space:nowrap;
Full code:
.scroll-area {
width: 85%;
float: left;
overflow: scroll;
white-space: nowrap;
}
.sidebar {
width: 15%;
float: left;
}
I hope this will help you.
Here is Fiddle