Here is the screenshot of my 'icon-reorder' on Chrome.
I can't figure out why it doesn't have the equal space between each bar.
I just use <i class="icon-reorder"></i> and that's it.
Do we have a solution for this?
Make sure you are not overwriting any of the FontAwesome defaults and you have defined the font-size before adding the fonts.
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-rendering: auto;
Related
I am attempting to fix the offset between the text and the material icon.
I have no position editing CSS.
This is the HTML for the two elements.
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
The CSS from here https://fonts.googleapis.com/icon?family=Material+Icons
I attempted to use things like margin and that just offsets the entire div.
The HTML and CSS codes you have are as follows:
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
The above snippet outputs this:
To have the text on the same line as the icon, set the text's display to inline and add a left margin to it
h6.inline {
display: inline;
margin-left: 10px;
}
After modifying, the resultant code:
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
h6.inline {
display: inline;
margin-left: 10px;
}
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
You can try by putting the icons and the <h6> into a <div> tag. After that you have to make the display of that div flex.
Here is the code:-
.align-div{
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
<div class = "align-div">
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
</div>
Same goes with the phone section place them in a div and same process goes on.
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.wrapper {
display: flex;
align-items: center;
}
<div class="wrapper"><i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
</div>
wrap text and icon in one wrapper div. Set this wrapper div classname ```.wrapper````.(you can use any name for classname)
set .wrapper to display:flex;align-items:center.
<html>
<div class="wrapper">
<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info#ex.com</h6>
</div>
</html>
<style>
.wrapper{
display:flex;
align-items:center;
}
</style>
I could share working example but I need your code
I use Font Awesome to put an icon before my hyperlink. I have a css for my hyperlink:
a.cancel {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #eb1700;
text-transform: uppercase;
text-decoration: none;
}
a.cancel:before {
font-family: "Font Awesome 5 Pro";
content: "\f057";
padding: 0 4px 0px 0px;
font-weight: 300;
}
a.cancel:hover {
text-decoration: underline;
}
a.cancel:hover:before {
text-decoration: none;
color: blue;
}
Unfortunately, the text-decoration isn't removed under my icon when hovered. How can I fix this?
There are many ways to fix that, but here is how I usually proceed:
Set display: inline-block to the link, then float: left to its pseudo-element.
a.cancel {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #eb1700;
text-transform: uppercase;
text-decoration: none;
display: inline-block; /* + */
}
a.cancel:before {
font-family: "Font Awesome 5 Pro";
content: "\f057";
padding: 0 4px 0px 0px;
font-weight: 300;
float: left; /* + */
}
a.cancel:hover {
text-decoration: underline;
}
a.cancel:hover:before {
text-decoration: none; /* You can remove this line */
color: blue;
}
hello
I'm guessing a bit on your HTML here. Assuming there is no additional HTML in your A tag, the short answer is: you can't have the text-decoration apply to only part of the A tag via CSS. It applies to all of the A tag or not. The :hover is triggering on the A tag. The :before isn't truly a separate DOM element. The A:hover is triggering regardless of if you're over the :before portion or the regular portion, if that makes sense.
However, if don't mind adding a little extra HTML inside your A tag, you can have the underline apply only to that element:
<a class="cancel" href="http://example.com"><i>http://example.com</i></a>
a.cancel:hover i {
text-decoration: underline;
}
The above will tell it to put the underline only in the internal tag, not the whole A tag. You can use whatever inline tag you want, such as span, etc. This may not be what you want, but without some sort of separation, you can't have the A:hover apply only to the text and not to the :before. It's all one DOM element. If you inspect it in Chrome (and others), you'll see the ::before inside the A container.
I did buy Charter and Kievit for my website.
The fonts are ok and are the same used by Medium.com
I use Jekyll and the smoothing is ok in most browsers but Safari.
How can I obtain a font rendering that is closer to Medium.com. Their website has settled a landmark for web fonts.
This is how my website looks:
And this is how Medium.com looks:
I detect that my website fonts are more wider, more shorter and more thicker/blurry.
This is a part of my file `fonts.css``
#font-face {
font-family: 'Charter';
font-weight: normal;
font-style: normal;
src: url('../fonts/charter.eot');
src: url('../fonts/charter.eot?#iefix') format('embedded-opentype'),
url('../fonts/charter.woff2') format('woff2'),
url('../fonts/charter.woff') format('woff'),
url('../fonts/charter.ttf') format('truetype');
}
#font-face{
font-family: 'Kievit';
font-weight: normal;
font-style: normal;
src:url('../fonts/kievit.eot?#iefix');
src:url('../fonts/kievit.eot?#iefix') format('eot'),
url('../fonts/kievit.woff2') format('woff2'),
url('../fonts/kievit.woff') format('woff'),
url('../fonts/kievit.ttf') format('truetype');
}
Best regards,
This is part of the styling applied to medium.com titles:
font-size: 29px;
line-height: 1.04;
letter-spacing: -.028em;
font-weight: 700;
And article header lines:
line-height: 1.5;
letter-spacing: -.004em;
font-weight: 400;
Pay special attention to line-height, letter-spacing and font-weight
Have you inspected the elements from Medium.com? Inspecting the H3 of the title of the blog you've shared via Chrome Developer Tools, shows the following ccs rendered styles
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
display: block;
font-family: medium-content-sans-serif-font, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Arial, sans-serif;
font-size: 32px;
font-style: normal;
font-weight: bold;
height: 36px;
letter-spacing: -0.64px;
line-height: 36.8px;
margin-bottom: 0px;
margin-left: -2px;
margin-right: 0px;
margin-top: 39px;
visibility: visible;
width: 702px;
word-wrap: break-word;
I edited the font size of my h1 tag, but it looks like the height of the div doesn't automatically fit it:
I tried manually setting the height, but then the div just extends below instead of encasing the text:
Is there any way to make the div fit to the font size?
Here's my css:
h1 {
background-color: red;/* TEST */
font-family: Lobster;
font-size: 66px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
Change:
h1{
background-color: red;/* TEST */
font-family: Lobster;
font-size: 66px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 1;/*Change is here, don't put px at the end*/
}
See if that works for you.
Set the line-height and font-size to the same value:
font-size: 66px;
line-height: 66px;
Has anyone found a fix for dropdowns shaking horizontally at a rapid rate in Firefox only? Comments of others that have seen this but not found a fix would be appreciated also.
HTML code: (It still does it even after the list has populated)
<select class="ng-pristine ng-valid" id="batchStatus" name="batchStatus" style="font-size: 14px;" ng-model="lineStatus" ng-options="value.listCode as value.listDesc for value in batchStatus">
<option class="" value="">Select Status ...</option>
</select>
Computed CSS Code for select tag: (There are too many css styles to post)
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
box-sizing: border-box;
color: #444;
cursor: default;
font-family: "Helvetica Neue",HelveticaNeue,Helvetica,Arial,"Nimbus Sans L",sans-serif;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: 14px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: 500;
height: 23px;
line-height: 17.9px;
list-style-image: none;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
text-indent: 0px;
text-shadow: none;
text-transform: none;
width: 180px;
<!-- begin snippet: js hide: false -->
Computed CSS Code for option tag:
box-sizing: border-box;
color: #000;
cursor: default;
font-family: "Helvetica Neue",HelveticaNeue,Helvetica,Arial,"Nimbus Sans L",sans-serif;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: 14px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: 500;
line-height: 17.9px;
list-style-image: none;
list-style-type: none;
text-indent: 0px;
text-shadow: none;
text-transform: none;
Note: I have tried searching for answers. A firefox addon was the issue was the closest thing I could find. But I tried disabling all the addons as it suggested with no luck.
I tagged AngularJS, but doubt that is the issue, especially since the issues remains even when nothing has loaded.
My co-worker and I solved the issue with a hack that forced the vertical scrollbar to show even when the pages content would not push below the fold.
html {overflow-y: scroll;}
https://css-tricks.com/snippets/css/force-vertical-scrollbar/
I am guessing substituting ng-if for ng-show might be another solution.
Problem Details
The problem was a combination of using angularJS's ng-show, ui-grid's attribute ui-grid-selection and having short pages that ended above the fold.
The weirdest thing is that without the ui-grid's ui-grid-selection attribute it worked fine. Must be a CSS issue(maybe positioning) where the ui-grids selection adds height even if it is not visible (ng-show, display: none;).
Note: Using AngularJS 1.2.28 and ui-grid 3.0.0-RC20.