I am trying to modify some website code that I have got from a template. In the css file i have a number of lines of code which look as follows - and i assume these are the logos to be referenced;
/*********************************************************************************/
/* Icons */
/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */
/* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */
/*********************************************************************************/
.fa {
text-decoration: none;
}
.fa.solo {
}
.fa.solo span {
display: none;
}
.fa:before {
display:inline-block;
font-family: FontAwesome;
font-size: 1.25em;
text-decoration: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}
.fa-2x{font-size:2em}
.fa-3x{font-size:3em}
.fa-4x{font-size:4em}
.fa-5x{font-size:5em}
.fa-apple:before{content:"\f179"}
.fa-windows:before{content:"\f17a"}
.fa-android:before{content:"\f17b"}
.fa-linux:before{content:"\f17c"}
.fa-dribbble:before{content:"\f17d"}
.fa-skype:before{content:"\f17e"}
.fa-foursquare:before{content:"\f180"}
.fa-trello:before{content:"\f181"}
.fa-female:before{content:"\f182"}
.fa-male:before{content:"\f183"}
.fa-gittip:before{content:"\f184"}
.fa-sun-o:before{content:"\f185"}
.fa-moon-o:before{content:"\f186"}
.fa-archive:before{content:"\f187"}
.fa-bug:before{content:"\f188"}
The issue i am having is that the logos do not appear on the webpage. Does the slash indicate that in the current directory there should be image f181,f182 and so on or do these values represent something else.
Thanks for your help.
I got the answer. These codes are from font awesome family. Down load the font awesome and link to your webpage. It will work for you.
Download Font Awesome
Related
When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.
Website: https://dnidomaturypl.netlify.app
Source Code: https://github.com/mbledkowski/dnidomatury
-it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.
It's because how the font were build.
.Poppins {
font-family: 'Poppins', sans-serif;
}
.Poppins {
font-family: 'Jost', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
<h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>
I'm working on a Squarespace site and added a MyFonts web font to use for some headings and the index menu. It displays beautifully on desktop but when I view it on mobile, almost all instances of that font (Sackers Gothic) show up wrong. They either overlap, in the case of the menu, or go off screen. It seems to be more of a problem when they're center-aligned. One user also said this was a problem on her iPad, although it looked fine on mine. In the case of the home page index menu, the links should also go to a new line on mobile, as they do on my iPad.
It's CLEARLY a problem with my CSS but how do I fix it? How do I get it to display normally (ie the way it displays when I just use the built-in squarespace fonts, or the way it displays on desktop)?
The one hint I got at the root problem is that since I'm overriding the font that Squarespace is putting on, it appears that my iPhone positions the text based on what the Squarespace font would have ben, and then converts to the MyFonts font, rather than positioning it based on the MyFonts font. But again I have no idea of that's the actual problem, or how to fix it.
This is what it looks like on desktop:
And this is what it currently looks like on mobile:
Home Page
Another Page
This is all the site-wide custom CSS I'm using (in case there are more problems I'm missing).
/**
* #license
* MyFonts Webfont Build ID 3477103, 2017-11-02T21:34:57-0400
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: SackersGothicMedium by Monotype
* URL: https://www.myfonts.com/fonts/mti/sackers-gothic/medium/
* Copyright: Digitized data (C) 2003 Agfa Monotype Corporation.
*
* Webfont: SackersGothicMediumAlt by Monotype
* URL: https://www.myfonts.com/fonts/mti/sackers-gothic/medium-alt/
* Copyright: Digitized data (C) 2003 Agfa Monotype Corporation.
*
*
* License: https://www.myfonts.com/viewlicense?type=web&buildid=3477103
* Licensed pageviews: 250,000
*
* © 2017 MyFonts Inc
*/
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/350e6f.css");
#font-face {
font-family:'SackersGothicMedium';
src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot');
src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot?#iefix')
format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca5e9140b7d05d1be6b9/1509673566929/350E6F_0_0.woff2')
format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca57f9619ab843b69aba/1509673560243/350E6F_0_0.woff')
format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca50e2c483cd2608015b/1509673553520/350E6F_0_0.ttf')
format('truetype');
}
#font-face {
font-family: 'SackersGothicMediumAlt';src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot');src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot?#iefix') format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca7ae4966baa783e612d/1509673594306/350E6F_1_0.woff2') format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca75085229ec684a6add/1509673589300/350E6F_1_0.woff') format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6d8165f5e83ce3e406/1509673582003/350E6F_1_0.ttf') format('truetype');}
span.collection-nav-item-span{
font-family: 'SackersGothicMedium' !important;
}
h2.site-tagline{
font-family: 'SackersGothicMedium' !important;
}
h2{
font-family: 'SackersGothicMedium' !important;
text-transform: lowercase;
}
h1{
font-family: 'SackersGothicMedium' !important;
text-transform: lowercase;
}
blockquote{
font-family: 'SackersGothicMedium' !important;
text-align: center;
}
figcaption{
font-family: 'Raleway';
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
text-align: center !important;
}
#media only screen and (min-width: 1040px) {
span.collection-nav-item-span{
font-size: 3.7vw;
}
}
.site-branding h1 {
background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcef98e31d1945635645b1/1509748633336/FIG_17_WEB_Logo_1_dark.png);
background-repeat: no-repeat;
background-size: contain;
}
.has-index-nav.swap-header-color:not(.view-item) .site-branding h1 {
background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcede408522952619026f3/1509748197382/FIG_17_WEB_Logo_1.png);
background-repeat: no-repeat;
background-size: contain;
}
And the website is figcookingschool.com
And here's a screenshot of the HTML for that part of the homepage
HTML
Thank you SO much in advance for your help!!
How to change the Unicode for an ::after object in wordpress?
I tried to do it in css and it just imputed the unicode code instead of the icon?
The original code is this:
.x-navbar .desktop .x-nav li>a>span:after {
content: "\f103";
margin-left: 0.35em;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And the code I updated it to is this. I have tried using an !important; tag on the end of the unicode line and no luck, so I took that out...
x-navbar .desktop .x-nav li>a>span:after {
content: "f0d7";
margin-left: 0.35em;
font-size: 16px;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: rgba(82, 76, 76, 0.43);
-moz-osx-font-smoothing: grayscale;
}
This is my div site below.
http://wvleadership.cyndeeadkins.com/
So what am I doing wrong and why is this so hard to over ride?
So I finally found out why it was dropping the "\" from the code. I finally got a response from the wordpress theme developer. This will be nice to know for anyone else dealing with an issue like above.
There were two issues all together.
#1 issue: I was saving this css code in the custom css section within the
"customizer" and it apparently doesn't like that. You need to save it in the child-theme's style.css file instead.
2 issue: I needed to add a little more code to the string, adding "body" in the beginning.
body .x-navbar .desktop .x-nav li>a>span:after {
content: "\f0ab";
}
I updated the child theme css file, then refreshed the caching and it worked. :D
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as
\2701 renders as ઍ
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..