font awesome icon is getting cut off on the left hand side.
Snapshot
Below is my code
<div class="media-left">
<i class="fa fa-search fa-5x text-white"></i>
</div>
Css
.media-left{
display: table-cell;
vertical-align: top;
}
.text-white {
color: #fff;
}
.fa-5x {
font-size: 5em;
}
It might resolve your issue letter-spacing: 1px;
It might be because you have used 5x big font
you can use little search icon as well
<div class="media-left">
<i class="fa fa-search fa-4x text-white"></i>
</div>
It might resolve your issue
Since you're using display: table-cell; the icon itself isn't or atleast shouldn't be causing this. It could be another table-cell causing this or maybe something else. Since i can't say what is causing it because you haven't provided your other code i can only help you out with maybe another solution.
Since you want the icon to be around a single square how about using display: inline-block See the snippet below:
.media-left{
display: inline-block;
vertical-align: top;
background-color: black;
}
.text-white {
color: #fff;
}
.fa-5x {
font-size: 5em;
}
<head>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Fonts en Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- JQuery and Bootstrap.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="media-left">
<i class="fa fa-search fa-5x text-white"></i>
</div>
Hope this helps!
There is the main restriction of font icons: it should be used only with specific font sizes for avoiding artifacts
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
As mentioned #Dmitro it might help if you are using not guaranteed font sizes or using dynamic scaling of your content
letter-spacing: 1px;
Also additionally next CSS adjustment might help too :
transform: rotate(0.03deg);
Related
I'm using bootstrap-icons, which does not yet have an "unsorted" icon like this:
So I'd like to stack two separate icons to achieve that effect:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet">
<span class="d-inline-block position-relative" style="height: 1rem; width: 1rem;">
<i class="bi bi-caret-up position-absolute" style="font-size: 1rem; top: -5px;"></i>
<i class="bi bi-caret-down position-absolute" style="font-size: 1rem; top: 5px;"></i>
</span>
Run that code snippet, and open it in your browser's devtools - you'll notice the parent wrapper does not properly fit the contents. The parent <span> is smaller than the individual <i> icons. So when used in a table header cell (and other places too), it sometimes looks weird.
How could I fix this?
I have fiddled with your code and learned that:
the main span (class .unsorted) has to clip excess character spacing with overflow: hidden
line-height is already set to 1 by bootstrap for icons.
by default bootstrap icons have vertical-align: -0.125rem causing a slight shift up. I circumvented this by making the icons (<i>) display: grid, which also positions the characters nicely inside .unsorted.
A reasonable up/down offset for the characters seems to be 27.35%.
Additionally I introduced a few CSS custom properties to test various sizes of the combined character: sm, md, xl.
I know too little of bootstrap to be any use with that, so I created a vanilla CSS solution that seems to work with your bootstrap code.
snippet
/* * { outline: 1px dashed } /* for debugging */
body {
margin: 0;
min-height: 100vh;
display: grid; place-items: center;
}
.unsorted { background-color: rgb(128,128,128,.4) }
/********/
/* DEMO */
/********/
/* A few sizes to test variations */
.unsorted.sm { --button-size: 1em }
.unsorted.md { --button-size: 5em }
.unsorted.xl { --button-size: 9em }
.unsorted {
overflow: hidden; /* [MANDATORY] */
font-size: 1rem;
height: var(--button-size);
width : var(--button-size);
--icon-offset: 27.35%;
}
.unsorted i {
display: grid; /* centers the characters */
font-size: var(--button-size);
}
/* up/down offset, made to use positive numbers */
.bi.bi-caret-up { bottom: var(--icon-offset) }
.bi.bi-caret-down { top : var(--icon-offset) }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet">
<div>
<span class="d-inline-block position-relative unsorted xl">
<i class="bi bi-caret-up position-absolute" ></i>
<i class="bi bi-caret-down position-absolute"></i>
</span>
<span class="d-inline-block position-relative unsorted md">
<i class="bi bi-caret-up position-absolute" ></i>
<i class="bi bi-caret-down position-absolute"></i>
</span>
<span class="d-inline-block position-relative unsorted sm">
<i class="bi bi-caret-up position-absolute" ></i>
<i class="bi bi-caret-down position-absolute"></i>
</span>
</div>
I just wants to display a font awesome icon and text in a line:
<th>
<span>
<a>
<i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</span>
<span> Add Task</span>
</th>
It's working but the problem is =>
If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?
Target the element containing the font-awesome icon. Set position as relative and adjust top value;
a {
text-decoration: none;
font-family: Arial;
color: #333;
}
/*Example 1*/
i {
color: green;
vertical-align: sub;
font-size: 50px;
}
i::before {
font-size: 30px;
}
/*Example 2*/
span {
color: green;
font-size: 50px;
position: relative;
top: 4px;
}
span::before {
font-size: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--Example 1-->
<a href="#">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>
<br>
<!--Example 2-->
<a href="#">
<span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>
Example Code Pen: https://codepen.io/Omi236/pen/KqbQoO?editors=1100
In your case, you just need to use font size property at parent level.
Working example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<a style="font-size:16px;"><i class="fa fa-plus-circle"style="color:green;"></i><b> Add New</b></a>
</body>
</html>
I am hosting on awardspace and am trying to show font awesome icons. While developing in localhost everything worked fine.
<link rel="stylesheet" type="text/css" href="http://spaiosos.de/library/font-awesome-4.3.0/css/font-awesome.min.css">
<i class="fa fa-send"></i>
I also tried with only library/font-awesome-4.3.0/css/font-awesome.min.css still not working though. Also strange was that my .png images weren't showing up so I just uploaded them separately in awardspace and they showed up. Tried the same with the fa folders but it's not working.
I tried opening the link in the href but no page can be found
try using different CDN like https://cdnjs.com/libraries/font-awesome
Working example using social media icons:
<!-- FontAwesome Icons (Start) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
.fa {
color: #666 !important;
font-size: 24px;
margin-left: 15px;
}
.fa:hover {
color: #000 !important;
}
.social_icons a:nth-child(1) i {
margin: 0;
}
</style>
<div class="social_icons">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
</div>
<!-- FontAwesome Icons (End) -->
I am just using float: left on an icon right now because I am struggling with positioning the text in my button such that the icon is in the "middle" (20% of the left) and the text is in the middle (80% of the right).
Like this:
**********************************
* Icon Text will be here *
* *
**********************************
Here is how I have the button set up:
<button class="button button-block">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
Try CSS flexbox:
#container {
display: flex;
align-items: center;
}
#container > * {
margin-right: 5px;
}
<button>
<span id="container">
<img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
<span>Add to Favorites</span>
</span>
</button>
I used a span to wrap the content because some browsers don't accept button elements as flex containers.
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE 10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
How about something like this ?
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
.button-block {
display: inline-block;
vertical-align: middle;
}
.button-block i {
margin-right: 15px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content>
<div class="tabs" style="height:auto;">
<div class="row">
<div class="col" style="padding: 0">
<button class="button button-block button-positive">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
</div>
</div>
</div>
</ion-content>
</body>
</html>
Here is an example using Font Awesome.
Add a left margin to the span to control the spacing between the two inline elements (i and span).
If you specify a width for the button, then you can set widths to the two child elements as needed.
button span {
margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button button-block">
<i class="fa fa-plus-circle"></i><span>Add to Favorites</span>
</button>
.btn-cont {Margin-left: 12px;}
<button><span class="btn-cont">Hello World</span><button>
I am trying to POST to a server using <button type="submit"> save </button> but I need to style the button to look a certain way using css.
Here is what im trying to accomplish:
But this is what i get:
I need to style the button element to look like the correct image and remove the default button styles.
CSS
.inner-button
{
color: #008db8;
}
.inner-button:hover
{
color: #ad9961;
cursor: pointer;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="inner-button" type="submit" >
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x img-responsive"></i>
<i class="fa fa-floppy-o fa-stack-1x fa-inverse img-responsive"></i>
</span><br />
<b>Save</b>
</button>
You just have to remove the default CSS styling.
.inner-button {
background: none;
border: none;
margin: 0;
padding: 0;
}