I am using Zurb Foundation and need to display some French paragraphs. I am using Lato Google Font which can display French characters properly. But currently I get for the following:
Boucherville est une ville dans la région de la Montérégie au Québec, Canada.
this appearing:
Boucherville est une ville dans la r�gion de la Mont�r�gie au Qu�bec, Canada.
Any insights on how to make sure French Latin characters appear properly in Foundation?
Here is the website page
Click on BouchervilleMap menu item to see the offending code
I can't see your own personal CSS style sheet linked in your markup, could you post it please.
Based on what I can see in your mark up I think your problem is even though you are linking to the font in your you don't ever tell the page Where or When to use it. All the CSS you link to are CDN's so they are obviously the standard templates which use other English characters.
What I do to override Foundation is I have a FoundationOverides.css which I call last in my you could do the same and have something similar to this:
#import url('http://fonts.googleapis.com/css?family=Lato');
body{
font-family: "Lato, Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
button, .button {
font-family: "Lato, Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
// And so on...
What I would advise is download a copy of Foundation.css open it in your Text editor and search for this line :
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
Then just copy all the selector's one by one into your override CSS. Pain in the bum as it is mentioned 13 times but once you've done it, it's done.
Then in your html just make sure you include your override last like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Boucherville Quebec</title>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/5.3.3/css/foundation.min.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/foundation/5.3.3/js/vendor/modernizr.js"></script>
<link href="pathtoyour/css/FoundationOverride.css" rel="stylesheet" />
</head>
Related
I followed the example for setting up the ant-design-mobile for react, I'm using next.js - the styles are loaded, but not fonts.
I also extracted the HTML and created plain HTML example with full ant-design-mobile CSS and it also doesn't have proper fonts loaded.
See the difference, the font from the official ant-design-mobile button example
And the font from my example
P.S. Also - very strange - in the official ant-design-mobile documentation they advise against loading full CSS, but in its own example they actually include the full CSS
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" class="next-head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://unpkg.com/antd-mobile#2.2.8/dist/antd-mobile.min.css" />
</head>
<body>
<a role="button" class="am-button" aria-disabled="false"><span>Start</span></a>
</body>
</html>
Remove the css link and add this to your component
<head>
...
<style global jsx>{`
html,
body {
font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
margin: 0;
}
`}</style>
...
</head>
Scenario :
I'm using material icons, and I face a problem, I usually use filled ones and everything is ok, right now I want to use a outlined one, they have the same name, "screen_share"
Tried Case :
My try was include in index.html:
<link
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"/>
<link type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined"
rel="stylesheet">
and in myComponent.html
<button mat-button>
<mat-icon>
screen_share_outline
</mat-icon>
</button>
but it still shows the filled one.
How can I do it?
this is not the same than the suggested duplicate, because the solution presented is the option I try and didn't work
Use
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined"
rel="stylesheet">
Instead of
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons&style=outlined"
rel="stylesheet">
Looks like the outlined fonts have not been finalized yet per issue #773
https://github.com/google/material-design-icons/issues/773
I see you are reviewing this issue
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
Until the outlined versions are completely included you will need to use the workaround provided in that stackoverflow question... I verified it in stackblitz and it does work.
Add following import to index.html
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Add the following to style.css
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
Use the following in your component html.
<i class="material-icons-new outline-screen_share"></i>
You can use, for while, this repository. Works pretty equal to Material Icon normal
cguilhermf/material-icons-outline
I have 2 jqgrid tables here in fiddle, what is the best way to apply multiple themes only to the jqgrid tables.
I had tried adding css selector scope to the tables but it didnt work correctly on the table http://jqueryui.com/download/
Theme1 for table1
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.theme.css" />
My theme2 for table2
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.theme.css" />
First of all you should download custom jQuery UI themes from the jQuery UI download page. For example, you want to use Le-Frog and Redmond themes on one HTML page. The you can use HTML code like
<div class="redmond">
<table id="grid1"></table>
</div>
<div class="le-frog">
<table id="grid2"></table>
</div>
It means that div.redmond and div.le-frog could be selectors, which could be used to specify the scope of applying of the corresponding jQuery UI Theme CSS. Thus you can choose the following on the download page:
You included both CSS on your web page, like
<link rel="stylesheet" href="jquery-ui/le-frog/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui/redmond/jquery-ui.css">
and use the same code as usual. The results will be like on the demo:
or like on the another demo, which use Blitzer and Le-Frog themes:
I included in the demos jquery-ui.css instead of jquery-ui.min.css only to simplify everybody to examine the files. There contains CSS rules with the corresponding rules. For example
div.redmond .ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
and
div.le-frog .ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
instead of the standard rule
.ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
<!DOCTYPE html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Test title</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
</head>
<body>
<p>Example 1<br>
<a href="http://dummyimage.com/600x400/000/fff.png" download>Download this image</a></p>
</body>
</html>
The above, is a button (kind of) that downloads an image. It works fine on my laptop, but when I navigate to the url on my iPhone it doesn't download. Just takes me to the actual image.
Anyone know why? Or how I can fix this?
Thanks!
iPhone doesn't have a download functionality. You will need to tap-and-hold, and select "Save".
Help. Am learning HTML5/CSS. Things are going spiffy until I cannot debug my HTML/CSS markup.
Am using WeBuilder which auto-completes and has links to standard tools like Tidy and others.
Here is what I’ve tried
used an internal CSS link in my HTML: it works;
put the styles.css in same and in a css folder- BUMMER
have relocated both files to another HDD- BUMMER
both files validate with my available tools
I am sure the problem is in the HTML file and have fiddled with every modification I can find suggestions about. I have rewritten the HTML again using WeBuilder’s auto complete but have not done it in Notepad. I understand the basics of HTML and CSS plus am very familiar with files and folders so have directed the href correctly (even so have tried several ideas from W3C.
NOTE: I see in the "publish" here, it picks up the Arial font where mine has times. If Arial is not your default, I'm at a loss because the color doesn't show. Neither shows the color. If I can be of further help please advise. I really thank you for any help.
Here is my HTML markup:
<!DOCTYPE html5>
<html>
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type" content="text/htm; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content</p>
<h2>Third Title</h2>
<p>A paragraph of interesting content</p>
</body>
</html>
Here is the CSS:
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
This makes no sense:
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
It should simply be:
<link rel="stylesheet" href="styles.css" type="text/css" />
The <style> tags are only used for inline CSS in a page. So if you wanted to you could do this:
<style type="text/css">
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
</style>
But it is really better to keep CSS in a separate file.
Also, there is a minor issue with your DOCTYPE at the top of your HTML file. An HTML5 DOCTYPE is simply:
<!DOCTYPE html>
And not:
<!DOCTYPE html5>
The purpose of HTML5 is to—among other things—simplify document formatting & readability. So there is no such thing as <!DOCTYPE html5> it is simply <!DOCTYPE html>.