I've already found this post
How to add custom icon in Twitter Bootstrap?
But applying that solution it still computes me a 0x0px icon, I still can't understand how that may be possible but here's my sample code:
HTML
<i class="icon-linkedin"></i>
CSS
.icon-linkedin {
background-image: url("../../resources/img/icon-linkedins.png");
background-position: center center;
}
I haven't made one in bootstrap in a while, but it looks like the syntax might be a bit different now than it was when that post was made. This is how you generally would use an icon font with an element (or rather, a pseudo-element) with ANY icon font.
/* this just imports the font */
#import url(http://weloveiconfonts.com/api/?family=fontawesome);
.icon-linkedin:before {
font-family: 'FontAwesome', sans-serif;
content: "\f0e1";
}
DEMO
Related
Using weebly to create a website and I have come across this webpage(https://editortricks.weebly.com/how-to-add-icons-to-your-weebly-navigation.html) to add icons to the navigation bar. Here`s the code,
/* External Fonts */
#font-face {
font-family: 'dashicons';
src: url('fonts/dashicons.eot');
src: url('fonts/dashicons.eot?#iefix');
src: url('fonts/dashicons.woff');
src:url('fonts/dashicons.svg#svgdashicons');
src: url('fonts/dashicons.ttf');
}
.wsite-nav-1:before,
.wsite-nav-2:before,
.wsite-nav-3:before,
.wsite-nav-4:before,
.wsite-nav-5:before {
font-family: 'dashicons';
position: relative;
top: 1px; /* Changes the icons' vertical position */
margin-right: 0px; /* Changes the icons' horizontal position */
color: #000000; /* Changes the icons' color */
font-size: 1em; /* Changes the icons' size */
}
This allows the page to have icons in the navigation bar but they cannot be hyperlinked to another page. I have done a bit of HTML/CSS but I have no clue what I`m doing on Weebly's .less format. Please help, would really appreciate it.
You should be able to do id without HTML from the editor - choose the icon and then right-click it - from the menu, choose the "chain link" icon and paste the URL there.
if that didn't work you can use HTML tags within Weebly, so you can do something like this (the simplest way):
<img src="insert image location here" title="insert title" alt="insert description here">
This is the codepen for my HTML layout for a magazine - link here.
I have been experimenting with the CSS and trying to achieve a more blog-like design with my CSS, to emulate the effect seen at https://www.autocar.co.uk/car-review/bmw/7-series/first-drives/bmw-7-series-750li-xdrive-2019-review
(well, the way the article and sidebar with other articles is; the article and Driven this week part)
Currently I have this CSS:
body {
background-color: gray;
font-family: Verdana, sans-serif;
font-size: 14px;
}
p {
font-family: Verdana, sans-serif;
font-size: 13px;
line-height: 21px;
}
header {
background-color: #FFFFFF;
}
div.article {
width: 800px;
height: auto;
background-color: #FFFFFF;
float: right;
overflow: auto;
padding: 5px;
}
div.article img {
height: 340px;
}
but what sort of padding etc. could I use while keeping the div.article as white (FFFFFF) and get the header to work more effectively with the title?
if the header is in anything but h1, h2, h3 etc. it doesn't quite work - example at forked codepen.io copy - https://codepen.io/anon/pen/pBgQjw
Although this uses Verdana here for ease of use, what's the best way of getting FontSquirrel fonts like OpenSans to work locally (i.e. not linking to online source, but the directory the fonts are in); I've often used .ttf when doing fonts other than Arial or Verdana.
I may be using Gotham font soon, but for now it's OpenSans and OpenSans Bold.
OpenSans Bold is for h1, h2 in the CSS soon.
This is only a testing page on localhost, but it maybe used as a template for a PHP site.
No Javascript is in use yet but if you have any good suggestions for ones that could work, I'd appreciate it. (I've kept the design simple for now).
The grey background will be kept, and div.article in white.
I would welcome any advice on how to turn this from looking rather staid into a more professional, blog-like design.
I think you should try to use a CSS framework, e.g. Bulma (which is lightweight and easy to use and based on CSS flexbox). See Bulma docs here: https://bulma.io/documentation/
As for the font implementation I think #font-face should do the trick - you just have to download the font to your server (or local device).
I have some images that are loaded with a cheap trick after the DOM is ready:
<img src="" data-src="/path/to/img" alt="">
I'm just putting the content of data-src into the src-attribute with JS. Nothing fancy.
But as there are a some hundred images to load this takes some time. So I was trying to use the unicode of a FontAwesome icon as alt-text to display a cogwheel as placeholder:
<img src="" data-src="/path/to/img" alt="">
Unfortunately this won't work because the whole FontAwesome-magic isn't clicking.
Has anyone ever tried the same? Is this possible after all?
I cannot claim credit for this solution, that belongs to #PeeHaa who wrote the comment that solved #Stephan_Weinhold's question.
I'm just trying to create clarity, as all of the official answers use JavaScript, and only if you read the comments will you find it's possible with simple HTML/CSS.
HTML
<img src="" data-src="/path/to/img" alt="" class="passphoto">
CSS
img.passphoto {
font-family: 'Font Awesome 5 Free';
/* customize the following as desired */
font-size: 9em;
display: inline-block;
width: 200px;
height: 234px;
border: 1px solid lightgray;
}
I'm afraid you can't. But I can offer you a trick.
The trick is that you can handle the image load error (that's why you want the alternative text, isn't?), then show the icon you want.
It's not good solution for SEO but you want to show an icon so I guess that this is not your goal.
Note If you can't see the effect in the snippet, watch it in the bin - I think it's because caching issue.
$('img').bind('error', function() {
console.log('error');
$(this).hide().after('<i class="fa fa-gear"></i>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<img src="blablalba" />
http://jsbin.com/kahuxaqezu/1/edit?html,js,output
I'm having problems with this on iPhone now?
I used the ONERROR to inject the CLASS if the image is not found.
CSS
/* FONT AWESOME (support for all icons) */
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* FONT AWESOME (user icon) */
.fa_user:after {
font-family: 'Font Awesome 5 Free';
font-size: 9em !important; /* added !important, couldn't use 900, didn't work */
content: "\f2bd"; /* UNICODE (Font Awesome) <i class="far fa-user-circle"></i> */
line-height: 1.0; /* I had to add this because it was INHERITING 1.5 throwing off the spacing */
}
HTML
<img src="./images/.photo.jpg" onerror="this.classList.add('icon', 'fa_user');" alt=''>
Font Awesome documentation
User Icon
I am trying to integrate font-awesome into a web project but an identified little piece of code in my css makes the font-awesome icons appear as white squares. When I remove the little peace of CSS code it works but I cannot remove it due to the current web site layout. Is there a way to make the icons appear right anyway?
This is the code that blocks the icons that is needed for the layout:
*,*:before,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
It doesn't matter if font-awesome css is included before or after my custom css code. The issue remains...
Your font-family is being overwritten to Arial. Remove the font related parts from this selector and add it to a body selector.
*,*:before,*:after{
box-sizing: border-box;
position: relative;
}
body {
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
The problem is in *:before so you have to change that in you css. Take a look at this https://jsfiddle.net/ss95sfLz/
CSS
*,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
This is problem because font-awesome icon use :before and this is the code
.fa-balance-scale::before {
content: "";
}
You are overriding all (*) of the fonts in the :before and :after pseudo selectors; which are used by font-awesome and many other libs. You should try to target only what needs to be changed by that code-snippet with a .class or #id.
I have this really basic issue I am trying to solve for a while now. I am running out of all ideas.
I have a css pseudo-element before that I am styling like this.
#fPhone::before{
color: #78be20;
content: "\e622";
font-family: icons;
}
But on the browser it just prints out 622. When I inspect the pseudo tag, I see
content: "e622";
If I try adding "\" in the debugger it works but for some reason it doesn't pick it up from css.
I am running out of reasons that could be causing this.
Sure you imported the icon-font correctly and are using the proper hexcode? Below proof that it works as you may expect...
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#fPhone::before{
color: #78be20;
content: "\e0cd"; /* different code, but same effect */
font-family: 'Material Icons';
}
/* class is pre-defined in #import (default <parent>color, 24px)*/
.material-icons { color: #78be20; font-size: 16px; }
/*
find the codes and ligatures for Material Icons at:
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
*/
<div id="fPhone"> a phone</div>
<div><i class="material-icons">phone</i> using ligature name</div>