I want to add a glassdoor icon. You can find my site at braunweiss.net. My theme uses fontawesome and it currently doesn't support a glassdoor icon. So I tried adding an image in place using the below code:
.social-menu li a[href*="glassdoor.com"]::before {content:url(http://braunweiss.net/wp-content/uploads/2017/07/glassdoor-2-1.png);}
However, it looks bad, it's not customizable, and it doesn't change when it is hovered like a font. I've read of using svg in inline css but cannot figure out how to do it. Here's where I got the glassdoor icon I used: https://materialdesignicons.com/ (scroll down, the icons are in alphabetical order).
Is there a better way to get the icon to show up? I can only customize css or add codes to my theme's php files on wordpress. Thanks.
Have you tried using an SVG?
https://github.com/FortAwesome/Font-Awesome/issues/6422 (SVG LINK IS IN HERE)
https://css-tricks.com/using-svg/ Icon SVG how-to.
Related
I downloaded a free css theme and this theme uses css file and font files for icons and unfortunately the theme has no documentation. How can I visually export them to an html file instead of looking at the CSS file line by line?
https://yadi.sk/d/K1fgjd61wWCy8Q
https://yadi.sk/d/j3tjDtwa3Gucng
https://yadi.sk/d/QCi26iPmPE5QIA
https://yadi.sk/d/POI-p5eOsmQArQ
https://yadi.sk/d/tKJY9lGomWsqmg
It was obviously created through icomoon, but I want to see visually which icons are there.
Just to clarify, you wanted to have a preview of the icons, right? That's why you're asking to convert it to HTML to easily view in the browser. If so, I hope this would do:
With the use of your .SVG file (https://yadi.sk/d/tKJY9lGomWsqmg), you can upload this to https://icomoon.io/. There, you can have a preview of the available icons with their corresponding names.
IcoMoon App has a feature of converting .SVG to icons. And with that, it also offers to have a preview of the icons with their names.
I tried opening the .SVG on itself, but (I'm not an expert here) I didn't get to have a preview of the icons.
I hope that helps.
I want my Wordpress website navigation menu font larger And make the font become normal type, but NOT capital letters.
I have googled it and the result said need to change the theme style.css in WordPress dashboard, based on the tips but there has another issue, the style.css in my child theme is almost blank, only a few lines with the theme description (i.e. theme name / version / templates/ author etc.) , but Not the site theme CSS. Is the theme creator hide the CSS? So why this happened? And what should I do?
please see the screenshots below.
style.css
Big thanks in advance.
Most of the themes also have a section where you can put custom CSS. You can usually find this in the Wordpress Customizer, otherwise in the theme settings. This way you are always sure it wont disapear after updating your theme. Of course you can also use a child theme, but the style.css above doesn't look like it is from a child theme.
The CSS you are probably looking for is the following:
.nav{
font-size:14px;
}
If you don't know the correct CSS selector (.nav) you can find it here. To see what styles you should use for the element you can look at the CSS Reference of W3Schools. Hope it helps you.
Use a code inspector ie. Chrome dev tools to make the changes you want to the existing style and copy/paste that code into your child theme stylesheet.
EDIT
In Chrome for example, open the code inspector using ctrl+shift+i might be different on a mac, I don't know. by default it will show you your html markup and your css styles below. Locate the element you want to change either by finding it in the html portion or using the selector tool (top-right of the developer window) and selecting the element you want to change on your page.
That will show you the css for that element that you can modify as you wish underneath. Once you are satisfied with the styles you have changed/removed/added, you can copy that code to your child theme css.
Other than that, I can only suggest you find some resources and videos on using dev tools to help you out. If you are building a child theme you will need to be using them significantly.
PS. One more thing to note is that some wp themes have some code that you can only really change with a plugin or by writing custom css under the customizer.
You can figure out exactly what you need to write in the custom css area by using chrome's dev tools and selecting the font you want to change.
I have my own website and I am currently using the Vulcan template on Wordpress and I want to change a texts font color. Is there a way to do this?
Yes of course, if there is a will there is a way.
Are you changing an element inside a post?
Open up your page/post editor and switch the editor to "Text" mode (look to the far right on the editor) and keep reading.
Are you changing a "hard-coded" element in a file?
Open up the file in question with your favorite text-editor and keep reading.
Changing multiple elements?
Look into using CSS classes (https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors). Add your classes to your HTML elements using the class attribute.
Changing just one element?
Look into using the style (http://reference.sitepoint.com/html/core-attributes/style) attribute on your element.
I have an old website, and I would like to add a glyphicons to a page of this site.
I cannot install bootstrap (link bootstrap.js and bootstrap.css to this page) because it will change all styled elements on the page.
Is there a way to add only "glyphicons functionality"?
You can build your bootstrap to components, which you need, on
http://getbootstrap.com/customize/
For example for only glyphicon, you can check only glyphicon checkbox and download.
Direct url for this setting is
http://getbootstrap.com/customize/?id=428c81f3f639eb0564a5
Scroll down and download it.
You download only two folders with css for glyphicon (bootstrap.min.css) and fonts files (in all only 170 Kb).
I prefer to use something called 'font-awsome' it has a huge library of icons and it only takes one line of code to include it into any project. - It works the same way as glyphicon being able to format with CSS etc.
I know this is not a answer to your question, but its a valid work around, and I prefer the font-awesome icons.
http://fortawesome.github.io/Font-Awesome/
View here how to include it on your website:
http://fortawesome.github.io/Font-Awesome/get-started/
Have Fun!
You can download glyphicons png on http://glyphicons.com/
I'm writing a rails app and in one of my views, I have a signup form. I'm using a bootstrap theme and in the textfields, when something is typed in, it is grey and hard to read. Without the theme the text is black and looks fine.
I've tried to edit the colors in the textarea classes of the theme but that hasn't worked.
What do I need to change to make the text a different color?
You need to apply a css style to the textfield to make the text black. Try something like...
input {
color:black;
}
Put that code in a css file in your assets/css directory. Make sure this css is getting loaded after bootstrap so that it overwrites it. I find Google Chrome's inspector tool handy for see what styles are being applied.