I am using Bulma css framework with custom font Comfortaa from https://fonts.google.com/specimen/Comfortaa
But the font has some extra space at bottom and it makes all text of elements to be little higher than it should be.
On img: 1) comfortaa 2) roboto 3) Segoe UI (with button and h1 with border)
see comparision img
How to make text of elements with Comfortaa font on same level as others ?
Preferably in Bulma. Thank you.
You could add extra padding to the text container to push it down a little. You'll need to tweak the amount of padding to suit. Below is an example of how that could work. I have created a class .text-offset that pushes the text down 1px with padding-top.
The whitespace you have outlined in your image is the fonts line height, it is different from font to font. Apparently, some web fonts try to balance the top and bottom spacing out for this reason.
body {
font-family: 'Comfortaa', cursive;
padding: 20px;
}
.text-offset {
padding-top: 1px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<a class="button is-primary">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
<span class="text-offset">GitHub</span>
</a>
Related
This question already has answers here:
Applying a Stylesheet Within One Div Only
(2 answers)
Closed 2 years ago.
I am trying to add bootstrap for one particular div element to show the alert message but it is impacting the font for all other page element and the font is looking smaller. How to make the bootstrap call for just one div in the page?
<div class="bootstrap-test">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<i class="glyphicon glyphicon-warning-sign"></i>This is a warning alert.
</div>
</div>
In this very specific case (as opposed to the more general 'how do I link a style sheet to just one element' questions which require more thought) if we look at the CSS in use:
bootstrap sets the font-family, font-size etc in body. If you don't like these then include in your own css something along these lines:
body{
font-family: Myspecialfont, Helvetica, sans-serif
font-size: 16px; /* or whatever you want the font size to be in the default case */
}
If you are worried about the alert looking how bootstrap wants it to look then you can set the font size and family for that specific use back to how it is in the bootstrap css:
.alert-warning {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
A default heavy check (✔) appears as "✔"
Bootstrap 4.3 appears to be stylizing the check, forcing the browser to render as a thick-green one, which is undesired for my tastes -- refer to the example below
I'd like to remove Bootstrap's styling, but cannot detect the styling rules that were used. I've attempted to locate it via grep -irn 10004 with no luck
How might I revert the styling back to the default to undo Bootstrap's work?
w/ Bootstrap:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
✔
<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap. The green checkmark is not the default. I don't know how to modify this HTML character so it shows with browser default styling.</div>
Default (Desired):
.small.text-muted {
color: #444;
font-size: .85rem;
}
✔
<div class="small text-muted">
This is how I want the checkmark to appear, but still including Boostrap on the page.</div>
The reason because the "✔" check has style of green is caused of styled by the browser based on the font rule.
To be able to revert the styling back to the default style of check mark and undo the Bootstrap's CSS. You need to override the font-family property in the body and remove the "Segoe UI Emoji" font.
Note that you need to add !important to override the style.
Please see the code below
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"!important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
✔
<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap. The green checkmark is not the default. I don't know how to modify this HTML character so it shows with browser default styling.</div>
or In order to avoid using !important ( as Jon P mentioned) you can create a style tag after the inclusion of your bootstrap css file so that it will override the style.
Note: Bootstrap css file should be declared first then declare the style to override next.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"
}
</style>
✔
<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap. The green checkmark is not the default. I don't know how to modify this HTML character so it shows with browser default styling.</div>
Hope this helps.
The three horizontal lines of the hamburger icon render as "X" on a few mobile phones. In other mobile phones and desktop the hamburger icon renders correctly as three horizontal lines. To be more specific it is on all XIAOMI mobile phones on all browsers.
The <Head> code is
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
And the <Body> code is
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰Menu</div>
<div class="site-name">ABCD</div>
I had to insert an ugly text "MENU".
Snapshot attached.enter image description here
The symbol you're seeing - which looks a bit like an X in a box - is the Android symbol for "I can't find this character in my built in fonts."
You need to provide a font - or Icon Font - for that specific character (U+2630).
As for why Xiaomi doesn't support that... It might be because ☰ is the Chinese "trigram for heaven" symbol. They might not have included Chinese fonts on a non-Chinese phone.
You could instead draw the icon with CSS instead of hoping that each client has the font.
.hamburger {
display: inline-block;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
}
<div role="button" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
If you're Client doesnt have a certain Font, there are certain ways to fix it:
Use a font CDN my prefered choice to use Font-Awesome
Deliver Font on Request
Use a font CDN
As this method is more suitable, as you are not trying to include a random font, but you want to use a font to display Icons. I suggest you to use FontAwesome. It only provides many more fun and free icons to use.
Just include it as descriped in their start page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
To use the Hamburger Icon, just do it like this:
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
<div class="site-name">ABCD</div>
The <i class="fas fa-bars"></i> Part includes the Icon. The fa-bars class is used to reference the specific FontAwesome Icon. For example change it to fa-caret-down to see this icon.
Note that im not sure, if your hamburger css class is needed anymore, as you haven't shared its code yet. Just being said, that this solution will include the icon without any more css.
Deliver Font on Request
Just Upload your font to the wwwroot/font folder and link it in your css:
/*default version*/
#font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.otf')
format('opentype');
}
/*bold version*/
#font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
local('Lovely Font Bold'),
local('Lovely-Font-Bold'),
url('fonts/lovely_font_bold.otf')
format('opentype');
font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }
be sure to check out the link for this one.
Summary
I'd clearly go with the CDN / FontAwesome Approach, as it provides much more usability. Browse for any Icon you'd like and just easily include it. On the other hand, it also adds a new dependency to your project, which is not alaways a desired choice.
If so use the approach to Deliver your own font. Make sure it contains the Icons you need and you're good to go. This solution would be best to use, if you really needed to provide your very own font. It could also be containing a simplified version of your companys logo or whatever.
I hope this clears things up for you. If you're interested in why your current solution doesn't work have a look at terence eden's Answer.
Specifaclly I just want to change this header by giving it's own, color, font, size, weight.etc
<div id="header">
<a href="google.com">
<h1>
<li>EXAMPLE LINK</li>
</h1>
</div>
Firstly, there are several errors in your HTML, which should be fixed first:
<div id="header">
<!-- needs a closing </a> tag and some text, as well as a full href -->
<!-- what is your reason for using an LI element here? -->
<h1><li>EXAMPLE LINK</li></h1>
</div>
As far as styling, you can use CSS, like so:
h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}
/* etc. */
Search Google for basic CSS tutorials. Once you've decided which styles you would like to apply, simply save your text document as something like "style.css", and add a LINK element to the header of your HTML file (this will allow you to use it as an external stylesheet.):
<head>
<link rel="stylesheet" href="style.css" />
</head>
There are other methods for applying styles, such as inline styling, etc., but the above is one of the more typical ways of going about doing it.
Here are some resources to get you started:
w3schools CSS tutorial
CSS-Tricks
How to apply stylesheets
Here is a jsfiddle
You specify a stylesheet with:
<link href="<path>/site.css" rel="stylesheet" type="text/css" />
where <path> is the path to the stylesheet and Site.css is the name of your stylesheet. This is normally in <head>.
You do this either with an inline style or a style section in your page or in a style file.
I wasn't sure if you wanted to format the a as well. Also, I wasn't sure if you want to style the header div or h1. If you want to style h1, then replace #header with h1 in css.
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).