I'm making a site from an html5up template, and there is a part of the html that has a diamond icon class in a span that I would like to change with my png logo.
The diamond icon is not in the pictures folder nor the css so I'm not sure how I would effectively replace the image in the circle? Its as follows:
<div class="logo"> <span class="icon fa-diamond"> </span> </div>
Just wondering in which folder I would place my image, would it be the SASS code? Java?
If you need anymore information let me know.
This icon is not a image. This is font named: Font awesome. If you want to replace this icon just remove this class from span and add your img by
<span class="logo"> <img class="logo__img" src="/img/yourimg.img" alt="this is your image"><span/>
Look at your template default style.css file and check class="icon fa-diamond" styles and copy it to your img.png, but be sure that you change the font-size style to height of your image.
.logo {
/* replace this value to a value from Font Awesome icon style*/
width: 2rem;
height: 2rem;
}
.logo__img {
display: block;
width: 100%;
}
Related
We want to use custom logo insted of menu home icon. Here is our website https://www.anonymoushackers.net/ Here is the screenshot for reference.
enter image description here We want to place the small logo instead of icon that we have highlighted in the screenshot.
Here is the logo image that we want to use instead of icon. enter image description here
We also want to know that which class or id is suitable for this. We tried and wont be able to find that particular id or class.Please suggest if anyone knows
It's fontawesome icon. You can edit theme template and replace <i class="fa fa-home"></i> with <img src="logo.png" alt=""/>
Or override css style
.mnp-home-icon .fa-home:before {
content: "";
height: 30px;
width: 30px;
background-size: cover;
background-position: center center;
background-image: url(https://www.anonymoushackers.net/wp-content/uploads/2018/05/GGGGGGGG.jpg);
display: block;
}
If you try to change the custom Logo you have to change the logo section in header.php
<?php if (function_exists('the_custom_logo')) {the_custom_logo(); }?>
I using Google Chrome Inspector and if you select the before pseudo of the glyphicon you will see that there is empty space at the right. How I can center the glyphicon?
I tried to set text align but it doesn't work.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
jsFiddle
Updated link jsFiddle 2
I gave letter spacing for pseudo element and it did the trick. I tried changing the font-size and I see that white space is not appearing.
.glyphicon:before{
letter-spacing: -0.085em;
}
Working fiddle: http://jsfiddle.net/MasoomS/1z79r22y/
I believe the root problem here is with the SVGs that the icon font was built from. I've built icon fonts before from SVGs and saw this exact same behavior. If the symbol wasn't centered within its SVG viewbox, you'd get a glyph that was off-center like you've observed.
Developing a code-based solution would get super messy, because you'd have to individually account for each glyph that isn't centered, and then your offsets would have to be relative to the size of the icon so the offsets scale with the font-size of the icon. It's certainly do-able, but it seems like the sort of thing that would be a headache to maintain.
I would recommend one of the following:
Accept the glyphicon set for what it is (a free icon font) and live with its imperfections
Look for another icon font that doesn't have this same issue--be willing to pay for a license
Create your own icon font so you can ensure that all glyphs are centered
Almis Hi there. Your demo code is only using just the span holding the glyphicon it has no Width to center within.
As soon as you do something like this it will center.
<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>
Here is a Fiddle.
Just add the class my-style-icon to the icon and add this to your CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
vertical-align: middle; margin: 0 auto; should do the trick for you.
Hello Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Just replace the .glyphicon class with above css code.
Enjoy..
As you can see its clearly a problem by the author adding some white space, the only why to fix this is by setting the width manually.
You can get rid of the empty space on the right of the glyph by playing with the letter-spacing attribute:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
I normally use max-width (and width, if I want all icons in a list to have the same size) to deal with such issues.
As per your jsFiddle:
max-width:222px;
See here.
The reason this can't be fixed in any other way other than a hack is because the glyphicon itself isn't centered inside it's own container, meaning when it was designed in it's matrix it wasn't fully centered.
You will have to 'hack' it with shivs stated above (letter spacing, negative margin, etc) but it's resolution dependent.
However to VERTICALLY center it you can remove the padding, and use line-height equal to your container's height
Use font-awesome, it's '+' is perfectly centered, with no kerning problems. And use display:flex on parent, in combination with margin:auto on child (i.e. icon). It results in a perfectly alignment.
Here is the jsfiddle(http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
HTML:
<div class="container">
<div class="row">
<div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
CSS:
.fa-plus {
margin: auto;
font-size: 10em;
}
#add {
border: 5px dashed black;
border-radius: 25px;
display: flex;
}
In dijit toolbar the default icon size is 16x16 px
I would like to make a toolbar with icons with size 20x20 (or bigger so it will be more comfortable for user).
I've created new icons and added them to the CSS but I'm not sure how to re size the toolbar itself to show 20x20 icons.
Here is example how I create toolbar today:
http://jsfiddle.net/D4BVT/
<div id="toolbar1" data-dojo-type="dijit/Toolbar" style="background-color:inherit;background-image:none;border-bottom:0px;">
<div data-dojo-type="dijit/form/Button" id="toolbar1.cut" data-dojo-props="iconClass:'PanIcon', showLabel:false">Cut</div>
<div data-dojo-type="dijit/form/Button" id="toolbar1.copy" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div>
<div data-dojo-type="dijit/form/Button" id="toolbar1.paste" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div>
<!-- The following adds a line between toolbar sections-->
<span data-dojo-type="dijit/ToolbarSeparator"></span>
<div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>
</div>
The default icons are only 16px (height of them is 18px in CSS), if you want to use bigger icons, then you will have to create custom icon classes in CSS with these bigger icons.
For example:
.customCutIcon {
background-image: url("http://url.to/your/cut-icon.png");
width: 32px;
height: 32px;
}
And then you can use that as your iconClass in your data-dojo-props. The toolbar will automatically adapt to this new height. I also updated your JSFiddle. I used colors in this example, but you can also use icons.
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
I have a span like this
<span class="ui-icon ui-icon-circle-close"></span>
which gives display a close icon of color same as the theme color.
But want to use the red icons which are available for the error.
Which jquery class should I use for that.
I found a class in Jquery css
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }
this image is the image which contains jquery red icons .
But I cant use it.
The span's class only determines the icon.
Set the "ui-state-error" on its parent to change the icon's color to red.
Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).
When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.
To avoid the icon to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
To get a better alignment for the text, use the following
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>
If You want just icon with other color, not whole box as is the example here:
http://jqueryui.com/themeroller/, in bottom right conner
add this to anywhere in Your .css file:
.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }
The name and path of the file are depend of the color what You wanted.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin">
<span class="ui-icon ui-icon-alert"></span>
should do it.
Edited because I think I now found the right class.
Apply ui-state-error to the layer containing the icon(s) and remove the default background and border:
CSS:
.error-state-icon.ui-state-error {
border:none;
background:none;
}
HTML:
<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>
Demo >>