Im making some buttons with text and entypo font… but i cant seem to vertical align the entypo icons with the text… they stay at the same baseline…
<a href="#">
<span class="span1" aria-hidden="true" data-icon="📞"></span>
button
</a>
[data-icon]:before {
font-family: entypo; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
font-size: 50px;
}
a{
font-size: 1.1em;
}
you should be doing this:
[data-icon]:before {
font-family: entypo; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
font-size: 50px ;
line-height: 1;
vertical-align: middle;
}
a{
font-size: 1.1em;
}
additionally, because you set your icon font size to PX, you aren’t making it scalable. Kinda defeats the purpose of icon fonts. try changing the icon font size to 3em or so. As long as am at it, the span is somewhat superfluous ( except, for the aria-hidden) , but I think however you can hide this element using a media query ‘speech’. Essentially, you should be able to make a style sheet for aural devices, setting everything you don’t want read to hidden.
so then you could do this:
<a href="#" data-icon="��"> button</a>
and apply your rules for the span to the :before element, if/as needed.
hope that helps
thanks, now im trying to do the same thing in a <p> but it ends up looking like this:
Im using the exact same CSS and HTML as above except i changed the icon font-size to 2.5em.
You know how to fix this?
you could be having some other rule conflict, text the code in isolation.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
[data-icon]:before {
font-family: entypo; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
font-size: 2.5em ;
line-height: 1;
vertical-align: middle;
}
a,p{
font-size: 1.1em;
}
</style>
</head>
<body>
<p data-icon="��"> button also works</p>
<a href="#" data-icon="��"> button works</a>
</body>
</html>
Hmm still not working, can it have anything to do with me using the icon in a <span> ? Can u show me the media query ‘speech’ for using data-icon the way you do it?
Hmmmm now i tried to take away the font-face style sheet link, and by doing that the entypo icon jumps into place…
Here is my font-face.css can u see what is conflicting with the other code?
@font-face {
font-family: 'entypo-social';
src: url('../font/entypo-social.eot');
src: url('../font/entypo-social.eot?#iefix') format('embedded-opentype'),
url('../font/entypo-social.woff') format('woff'),
url('../font/entypo-social.ttf') format('truetype'),
url('../font/entypo-social.svg#entypo-social') format('svg');
}
@font-face {
font-family: 'entypo';
src: url('../font/entypo.eot');
src: url('../font/entypo.eot?#iefix') format('embedded-opentype'),
url('../font/entypo.woff') format('woff'),
url('../font/entypo.ttf') format('truetype'),
url('../font/entypo.svg#entypo') format('svg');
}
span.entypo, span.entypo-social{
position: relative;
}
span.entypo:before{
font-family: 'entypo'; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
span.entypo-social:before{
font-family: 'entypo-social'; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
Reggae,
I am confused abut which HTML you are actually using: MY SIMPLIFIED version, the one from your original post, or if you added something ( you mentioned a P tag, this want your original code).
Hmmmm now i tried to take away the font-face style sheet link, and by doing that the Entypo icons jumps into place…
So what you are saying is that everything looks right as long as Entypo is installed locally? Off the top of my head I dont see anything wrong with your @ font, besides if there was something wrong with the @font then the fonts would work of your local installation, and you would only be ‘surprised’ when the fonts were missing when the page was viewed remotely.
Another thing, unless your HTML is different from what you posted that LAST CSS wont apply.
from your OP:
<a href=“#”>
<span class=“span1” aria-hidden=“true” data-icon=“��”></span>
button
</a>
that is unless you have changed ‘class1’ to ‘entypo’ or ‘entypo-social’
keep in mind that CSS conflicts can be ANYWHERE in any style sheet as well.
EXAMPLE:
.container span{}
.el span{}
//**may not look like conflicting rules but both will apply to the SAME element if your HTML is like this:
<div class='container'>
<span> i think the first rule meant me</span>
<p class='el'><span>oops </span> too many cooks</p>
</div>
sometimes one needs to inspect for specificity.
My html looks like this:
<p aria-hidden=“true” data-icon=“��”>
text
</p>
I have gone through my css for conflicts but cant find anything?
Here is all my CSS i you think u have the time to eye through it. ( I fully understand if you dont=) )
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, block, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video {
font-family: inherit;
font-size: 100%;
font-style: inherit;
white-space: normal;
text-align: left;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-family: "museo-sans-rounded", verdana;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* RESET END */
/* SET ALL ELEMENTS BOX-SIZING TO BORDER-BOX
If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
}
/* MAIN CONTAINER */
.container {
width: 95%;
margin: 0 auto;
}
.wrapper{
width: 95%;
margin: 0 auto;
}
/* DEFAULT COLUMN STYLES */
.col {
display: block;
float:left;
width: 100%;
}
@media ( min-width : 768px ) {
.col {
margin-left: 2%;
}
}
/* RESET MARGINS */
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, .col:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/**** WIDTHS ****/
/* COLUMN WIDTH ON DISPLAYS +768px */
@media only screen and ( min-width : 768px ) {
.block-1 { width: 6.5%; }
.block-2 { width: 15.0%; }
.block-3 { width: 23.5%; }
.block-4 { width: 32.0%; }
.block-5 { width: 40.5%; }
.block-6 { width: 49.0%; }
.block-7 { width: 57.5%; }
.block-8 { width: 66.0%; }
.block-9 { width: 74.5%; }
.block-10 { width: 83.0%; }
.block-11 { width: 91.5%; }
.block-12 { width: 100%; }
}
@media screen and ( max-width: 767px ) {
.block-1,.block-2,.block-3,.block-4,.block-5,.block-6,.block-7,.block-8,.block-9,.block-10,.block-11,.block-12 {
width: 100%;
}
.pagewrapper{
padding: 10px 10% 10px 10%;
}
}
/**** WIDTHS END ****/
.block-1,.block-2,.block-3,.block-4,.block-5,.block-6,.block-7,.block-8,.block-9,.block-10,.block-11,.block-12 {
}
@media (min-width: 1024px) {
.container {
max-width: 900px;
}
.wrapper{
max-width: 1000px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1000px;
}
.wrapper{
max-width: 1100px;
}
}
a {
text-decoration:none;
-o-transition:color .2s ease-out, background .2s ease-in;
-ms-transition:color .2s ease-out, background .2s ease-in;
-moz-transition:color .2s ease-out, background .2s ease-in;
-webkit-transition:color .2s ease-out, background .2s ease-in;
transition:color .2s ease-out, background .2s ease-in;
}
body {
background:#eee;
border-top:5px solid #54abe9;
}
.wrapper { background:#fff; }
.flexslider { position:relative; }
.box {
position:absolute;
bottom:50px;
left:50px;
padding:20px;
width:400px;
color:#fff;
background:rgba(0,0,0,0.6);
z-index:100;
}
.box p {
margin-bottom:20px;
font-weight:100;
font-size:1.1em;
}
.box [data-icon]:before {
font-family:entypo;
content:attr(data-icon);
speak:none;
font-size:3em;
color:#fff;
line-height:1;
vertical-align:middle;
margin-right:5px;
}
.box a {
padding:7px 15px 7px 15px;
color:#fff;
background:#d2514a;
}
.box a:hover { background:#1879bf; }
header h1 {
font-size:3em;
margin-top:20px;
color:#666;
}
header h1 span { color:#1879bf; }
header ul li {
display:block;
float:right;
margin:20px 0 20px 30px;
}
header ul li a {
padding:8px;
display:block;
font-style:.9em;
text-transform:uppercase;
color:#666;
font-weight:300;
border-radius:32px;
-moz-border-radius:32px;
-webkit-border-radius:32px;
}
header ul li a img {
vertical-align:middle;
padding-right:5px;
}
header ul li a:hover {
background:#54abe9;
color:#fff;
border-radius:32px;
-moz-border-radius:32px;
-webkit-border-radius:32px;
}
.banner { margin-bottom:40px; }
.content h2 {
color:#1879bf;
font-size:1.5em;
font-weight:700;
margin-bottom:20px;
text-transform:uppercase;
}
.content p { font-weight:300; }
.content img {
width:100%;
padding:15px;
border:1px solid #eee;
}
footer { margin:40px 0 0 0; }
footer p { font-weight:300; }
footer h3 { color:#1879bf; }
footer .block-12 { border-top:1px solid #eee; }
footer .topleft {
border-right:1px solid #eee;
padding:2%;
}
footer .topleft [data-icon]:before {
font-family:entypo;
content:attr(data-icon);
speak:none;
font-size:3em;
color:#a2bd5f;
line-height:1;
vertical-align:middle;
margin-right:5px;
}
footer .topleft p, footer .topleft h3 {
text-align:right;
margin-bottom:15px;
}
footer .topleft p { font-style:italic; }
footer .topright { padding:2% 2% 2% 0; }
footer .topright [data-icon]:before {
font-family:entypo;
content:attr(data-icon);
speak:none;
font-size:3em;
color:#a2bd5f;
line-height:1;
vertical-align:middle;
margin-right:5px;
}
footer .bottomfooter {
background:#1879bf;
padding:10px 20px 10px 20px;
}
footer .bottomfooter .bottomleft {
float:left;
width:50%;
}
footer .bottomfooter .bottomleft ul li {
display:block;
float:left;
}
footer .bottomfooter .bottomleft ul li a {
color:#fff;
margin-right:10px;
font-style:.8em;
}
footer .bottomfooter .bottomright {
width:50%;
float:right;
}
footer .bottomfooter .bottomright p {
text-align:right;
color:#fff;
font-style:.8em;
}
And here is how it looks with the font-face.css applied. If i take away the font-face.css file the icons jump to the correct place, BUT the mail icon turns into the standard non-entypo data-icon in Chrome and in Firefox its the other way around, the other icons turns to standard icons while the mail-icon is entypo… hehe
I didt exactly this now, in a new file, and i still have this problem with the entypo font. It seems like entypo has some padding-top thats like twice the height of the icon…which seems stupid.
It works perfectly with the standard data-icon designs.
EDIT: so the vertical middle, line-height thing actully works, but the padding of the font-icon is making the actual icon drop below the text it is supposed to be aligned with.
Ok , let’s be clear: in the code I provided, there is no padding being applied to the font via CSS. This leaves the possibility that the font itself has some sort of leading. However, In my test it works fine .
Another issue, of course is that I cant really see your actual content font, . So lets try it this way ( which again is working nearly perfect in my tests) :
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
[data-icon]:before {
font-family: 'Entypo'; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
font-size: 2.5em ;
line-height: 1;
vertical-align: middle;
}
a,p{
font-size: 1.1em;
}
@font-face {
font-family: 'entypo';
src: url('../font/entypo.eot');
src: url('../font/entypo.eot?#iefix') format('embedded-opentype'),
url('../font/entypo.woff') format('woff'),
url('../font/entypo.ttf') format('truetype'),
url('../font/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<p data-icon="👤"> button also works</p>
<a href="#" data-icon=""> button works</a>
</body>
</html>
under the data-icon should be ‘&# 128100 ;’ (but no spaces)
You may be right, and you copy of Entypo may be faulty somehow. It just seems really odd.
I tried using your code now, still the same problem, but when i take away font-face it works… :S
odd stuff.