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
Related
I am using bootstrap to try to create the following layout:
Find below my minimum example:
.curr {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.price {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
color: #131722;
white-space: nowrap;
display: inline-block;
font-size: 36px;
line-height: 1;
height: 34px;
font-weight: 700;
}
.diff {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
font-size: 18px;
color: #26a69a;
display: inline-block;
}
.markettime {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
white-space: nowrap;
color: #37bc9b;
}
.markettime2 {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
color: #787b86;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>
<div class="row my-2">
<div class="col-lg-8">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div>
<div>
<div class="row">
<div>
<div class="price">304.2<span class="">0</span></div>
</div>
<div>
<span class="curr"> USD</span>
</div>
<div>
<span class="diff">+3.57</span>
<span class="diff">(+1.19%)</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div>
<span class="markettime">Market Open</span>
<span class="markettime2">(May 07 13:19 UTC-4)</span>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the text looks quite similar, but does not align correctly.
Any suggestions why?
You have each of the parts stored in divs, which default to display: block. Block-items take up their entire row. One option would be to set those displays to inline:
.curr {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.price {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
color: #131722;
white-space: nowrap;
display: inline-block;
font-size: 36px;
line-height: 1;
height: 34px;
font-weight: 700;
}
.diff {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
font-size: 18px;
color: #26a69a;
display: inline-block;
}
.markettime {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
white-space: nowrap;
color: #37bc9b;
}
.markettime2 {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
color: #787b86;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>
<div class="row my-2">
<div class="col-lg-8">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div>
<div>
<div class="row">
<div style="display: inline;">
<div class="price">304.2<span class="">0</span></div>
</div>
<div style="display: inline;">
<span class="curr"> USD</span>
</div>
<div style="display: inline;">
<span class="diff">+3.57</span>
<span class="diff">(+1.19%)</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div>
<span class="markettime">Market Open</span>
<span class="markettime2">(May 07 13:19 UTC-4)</span>
</div>
</div>
</div>
</div>
</div>
</div>
I do not recommend that you use inline styling like I've used, I just did a quick edit to show the difference when changing the display type.
All those empty <div>s create new block elements that create a new line and fill up all the horizontal space available.
I have cleaned up both the HTML and CSS code in here, but with only the HTML changes it will already work as expected:
body {
/* Moved all these common props up here: */
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
text-transform: uppercase;
white-space: nowrap;
line-height: 1
}
.price {
font-size: 36px;
font-weight: 700;
color: #131722;
}
.curr {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.diff {
font-size: 18px;
color: #26a69a;
}
.marketTime__base {
font-size: 11px;
letter-spacing: .4px;
margin-top: 8px;
}
.marketTime__state {
color: #37bc9b;
}
.marketTime__datetime {
color: #787b86;
}
<div class="row">
<span class="price">304.2<span class="">0</span></span>
<span class="curr"> USD</span>
<span class="diff">+3.57</span>
<span class="diff">(+1.19%)</span>
</div>
<div class="marketTime__base">
<span class="marketTime__state">Market Open</span>
<span class="marketTime__datetime">(May 07 13:19 UTC-4)</span>
</div>
Alternatively, you could use display: inline or display: inline-block to style those <div>s differently, but I think that HTML code could be simplified a lot.
a beginner here. I am trying to use Fontastic for a website. Here is how I am using it:
<html>
<head>
<link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet">
</head>
<body>
<h1>
<i class="icon-code">a</i> My Title
</h1>
</body>
</html>
How ever the result I get appears like this:
aMy Title
While it is supposed to show a tiny image. I appreciate any comment, suggestion and code sample.
Look at the contents of your css file. The only icons referenced are .icon-alignment-aligned-to and icon-briefcase. icon-code does not exist.
icons.css
#charset "UTF-8";
/* untitled-font-1 */
#font-face {
font-family: "untitled-font-1";
src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot");
src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot?#iefix") format("embedded-opentype"),
url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.woff") format("woff"),
url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.ttf") format("truetype"),
url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.svg#1417862732") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "untitled-font-1" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "untitled-font-1" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alignment-aligned-to:before {
content: "a";
}
.icon-briefcase:before {
content: "b";
}
<link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet"/>
<h1>
<i class="icon-briefcase"></i> My Title
</h1>
<h1>
<i class="icon-alignment-aligned-to"></i> My Title
</h1>
I am using below code to create label
<span class="label label-tags">Country
<a onclick="javascript:alert(0);" href="javascript:void(0);">
<i class="fa fa-trash-o"></i>
</a>
</span>
CSS Classes:
.label-tags {
background-color: #CBF6FF;
color: #000000;
font-size: 100%;
font-weight: normal;
}
.label {
border-radius: 0.25em;
color: #FFFFFF;
display: inline;
font-size: 75%;
font-weight: bold;
line-height: 1;
padding: 0.2em 0.6em 0.3em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-trash-o:before {
content: "\f014";
}
The above CSS generates label with trash icon but I need cross icon. Please suggest CSS changes to accomplish this.
font awesome version - 4.0.3, fa-times value is () or /f00d
keep it for future reference http://fontawesome.io/cheatsheet/
I'm wondering how to implement these icons using CSS.
Here is the CSS:
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before { content:'\e001'; }
.down_arrow_icon:before { content:'\e002'; }
.up_arrow_icon:before { content:'\e003'; }
...etc
And the HTML:
<div>
<i class="toc_icon"></i>Table of Contents
</div>
Any ideas?
The first thing you will need to do is import the font using #font-face in the CSS.
You will need the four major filetypes for the icons to have cross-browser functionality. These are eot ttf svg and woff. A good free resource for icon font sets is fontello.com:
#font-face {
font-family: 'spokeo';
src: url('path/to/spokeo.eot');
src: url('path/to/spokeo.eot?#iefix') format('embedded-opentype'),
url('path/to/spokeo.woff') format('woff'),
url('path/to/spokeo.ttf') format('truetype'),
url('path/to/spokeo.svg#spokeo') format('svg');
font-weight: normal;
font-style: normal;
}
The above imports the font to the browser for use later when you call the icons in your page.
You will now define the .icon class in the stylesheet like you did in your example:
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before { content:'\e001'; }
.down_arrow_icon:before { content:'\e002'; }
.up_arrow_icon:before { content:'\e003'; }
And then in your HTML you would write in the icon class as well as the specific class in your icon so that it includes all of the styles associated with all icons and then the specific icon contents, like this:
<div>
<i class="icon search_icon"></i>Search
<i class="icon down_arrow_icon"></i>Down
etc...
</div>
full code with working demo
jfFiddle
html
<div>
<i class="icon search_icon"></i> Search
</div>
<div>
<i class="icon down_arrow_icon"></i> Down Arrow
</div>
<div>
<i class="icon up_arrow_icon"></i> Up Arrow
</div>
css
#font-face {
font-family: 'spokeo';
src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot');
src: url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('http://getbootstrap.com/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
div {
margin-bottom: 5px;
}
.icon {
font-family: 'spokeo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
}
.search_icon:before {
content: '\e003';
}
.down_arrow_icon:before {
content: '\e094';
}
.up_arrow_icon:before {
content: '\e093';
}
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;