Glyphicons allows free use of its halflings icon set via Twitter Bootstrap: Bootstrap comes with two files (a .woff and a .svg) that are loaded as font files by the browser. Glyphicons also allows you to download PNGs of all the rest of its icons.
Is there a way to use bootstrap-esque classes in order to load the PNGs, or do I have to use ye old <img /> tags?
You could do something like this:
.glyphicon-envelope:before {
content: "";
width: 20px;
height: 20px;
background-image: url(envelope.png);
display: block;
}
The width and height would need to be adjusted to fit the image size correctly
Related
I have the following materials-icon package installed:
#material-ui/icons#4.9.1
I need to set the 'content' value for one of classes, in my CSS file, to the down arrow. How do I do this?
Material UI icons from #material-ui/icons#4.9.1 are exported as React components so you cannot use them in CSS.
But you have few options.
Include the material icons font and use that. More info here and here
Check the codepen
Once you have included the font in your page you can use it in CSS like this
p::after,
div::after {
content: "face";
color: blue;
}
But I dont like importing the entire fonts file just to have a single icon. So this is what I used to do.
Get the svg of the icon. Inspect the icon from material ui icons page, get the svg code and create a new svg file with the copied html and place it in your project.
Once you have the svg file, in your CSS use it like this
.download:before {
display: block;
content: ' ';
background-image: url('path-to-svg-folder/download.svg');
background-size: 24px 24px;
height: 24px;
width: 24px;
}
NB: if you dont want to have a svg file you can use the data url method and include the entire svg in your CSS file.
Right now I'm making nicely formatted CSS files for our temporary WordPress site, until the new site is ready. After making a CSS style sheet and pretty HTML files, I found they didn't work in WordPress if they were inline in a post, but instead I had to put them in a separate raw HTML file (using "WP File Manager" plugin to upload them to a separate folder.) After that, the way they display on the site matched what they look like on my HDD or on my personal (LAMP) test site (using Safari 10.1.1 OS X), and if I display source in my browser it looks identical to what I uploaded.
Then I created a tooltip style with CSS following the tutorial on w3schools. In the style sheet I define "edit" as a style for changes I made to the original text
.edit { /* changes made, */
color: navy;
position: relative;
display: inline-block;
}
.edit .tooltip {
font-size: medium;
visibility: hidden;
background-color: navy;
color: white;
text-align: center;
width: 20em;
padding: 0.5em;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.edit:hover .tooltip{
visibility: visible;
}
Then (per the tutorial) I add "tooltip" text inside "edit" text
<h5 class="edit">¶ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>
On my HDD and my personal site, the tooltip is invisible until I hover over it and then it pops up a balloon.
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored. To work around this bug for now (so I don't have to re-edit the HTML files), I was able to disable and hide all the tooltips by defining the tooltip style as
.edit .tooltip {
visibility: hidden;
font-size: 0%;
}
This suggests that the "tooltip" is being seen, but some aspect of the hidden part is being parsed differently on WordPress.com.
So is there some CSS style or property that WordPress could be using that causes my text to be shown? Any way to pre-emptively override this with CSS? Should I write a JavaScript that goes through and manually hides the tooltips?
Any experiments I should try to make it go away?
PS: This is different than the question at CSS Tooltip will not work on WordPress page because my text is shown inline.
You are saying:
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored.
This is an indication that the file with the styles for tooltip is loaded before other css styles are loaded. Thus files that load last override what's been loaded before.
For debugging, try adding !important to your tooltip style rules like this:
.edit .tooltip {
visibility: hidden !important;
font-size: 0%;
}
and see if that makes any changes.
Then, modify your WordPress files so that your tooltip styles are loaded last. That will allow you to remove the !important flag. (because using that flag is not a best practice and should be avoided whenever possible)
I am using a WordPress theme called Divi. This isn't a WordPress question. There are a number of provided social media icons, but I need a Soundcloud icon, and that is not provided. I'm not understanding how these icons are populating the page as they don't seem to be graphics, but rather are a font? However, I am unable to tell from the source code what is going on (inexperience).
What I'm trying to do is either add an icon of my design, or replace an existing icon. Can someone help point me in the direction if where I should be looking within my files to find the actual icons?
You can see a live site here and the icons are at the top right:
http://rattletree.com/wordpress2/
The dev code has this for the Facebook icon:
<ul class="et-social-icons">
<li class="et-social-icon et-social-facebook">
<a href="#" class="icon">
<span>Facebook</span>
</a>
</li>
</ul>
And the css has this:
.et-social-facebook a.icon:before {
content: "\e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}
So that makes me think this is a font, but I don't know how or where I can edit that font? Thanks for any help!
This looks like the font pack you are using:
http://www.elegantthemes.com/blog/resources/elegant-icon-font
It doesn't look like it has an icon for soundcloud, but you could use the cloud one:
So just add this to the style sheet:
.et-social-soundcloud a.icon:before {
content: "\e002";
}
Also, here's a tutorial:
https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
To add an icon of your design, add the following code to your stylesheet.
#top-header .et-social-icon.soundcloud a {
width: 15px;
height: 25px;
}
.soundcloud a.icon:before {
content: "";
background: url('https://placehold.it/15x25') 100% 100% no-repeat;
height: 100%;
width: 100%;
display: inline-block;
}
Make sure you create an icon, add the icon image to theme folder and update the url in the above code to point to that image.
Also add the class soundcloud to your menu in WordPress backend.
I am building a mobile site using jquery.mobile-1.0b3.min.css. If I download the css file, I lose some of the effects and icons from the theme I'm using. But I need to override some styling in that file even though it's hosted at jquerymobile.com.
The style I need to override is ui-select. The width attribute of this style is width: 60%, but I need to remove that style altogether while leaving the rest intact.
.ui-select {
width: 60%;
display: inline-block;
}
Is there a way to remove width: 60%; without effecting display: inline-block;?
You can add your own stylesheet that overrides any previous styles. (Just make sure your custom stylesheet loads after the jQuery stylesheet.)
In ASP.NET MVC3, how do I access the user interface icons which are included in the default package. They are located in the ~/Content/Themes/Base/Images, however, they are in an image map. An answer or link will work, just unsure of how I am supposed to integrate them and could not find an answer searching google or SO.
You'd do something like this:
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_469bdd_256x240.png);
}
That would be a generalized icon CSS class to indicate it as an icon and set the inheriting properties of width and height, as well as the grouped image to map icons off of. Then you'd reference each like so, using mapping:
.ui-icon-someIcon {
background-position: -32px -16px;
}
And then you could apply this to a DOM element:
<span class="ui-icon ui-icon-someIcon"></span>