Wordpress is stripping out the slash from
content:"\f12b";
in my CSS to display a Font Awesome icon. I can only use CSS in this particular case. Can anyone suggest a workaround/alternative way of stipulating the content number?
Thank you!!
Related
Often we can see CSS coding practices that use pseudo class such as before or after along with content inside it to eventually make it become an icon. such as
.email:before {content: '\e600'; font-family: special-font}
I think this question could be more relevant to how font-family works to render icon. Any idea on how does this works are welcome or point me some directions that I can do more research.
Maybe this will help?
Icon Fonts: How do they work?
Basically, the content code maps to a point in the font. The font is actually an icon. That css is a way to place the icon in the content without actually specifying it in the html content.
Full explanation here: https://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffereac5b&utm_medium=google
I am using a Drupal theme with font awesome. I can only assume something changed because if I use an icons with the format of (fa-""-"") it will not show or shows the unicode depending on the browser.
example: the code would look like this and would work fine- icon="fa fa-truck"
if you use icon="fa fa-pie-chart" it will not show.
I do not know the terminology to explain a two word or three word icon would be called. It also works if there is a four letter icon like "fa-file-text-o"
Here is a sample page in question http://valve.park3d.com/content/11delete is there a way to fix this? I would be happy to know the terminology of what to look for.
I had a similar issue, my issue was resolved by removing a bootstrap cdn file from header. Such as:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Or any other bootstrap cdn file you may have if you are using one.
But please note you will have to then have the actual file which you can download here:
http://getbootstrap.com/getting-started/
This answer is assuming you are using bootstrap as a front end framework.
In addition you may want to double check you have the CSS file for Font Awesome Icons.
I would like to add the following image...
in to a font-family that I am using on my website...
http://fortawesome.github.io/Font-Awesome/
which does not include this as an icon option.
What is the most effective and efficient process in achieving this?
You can create your own icon font-family with Inkscape using svg vector images. There is a great tutorial on webdesignerdepot.com about this. Don't add icons to an existing font whether that is possible or not, Font Awesome might get updated now and then with new fonts.
I am trying to use font awesome icons in CSS3 as background. I already tried this CSS:
content:"<i class="fa fa-circle-o"></i>";font-family: FontAwesome
However, it's not working. I want to use font awesome and I don't know how. Please let me know.
I suggest you go back to the font awesome website and read up about it, look at some examples of how to use it.
http://fortawesome.github.io/Font-Awesome/examples/
I'm using Cufon to add a Custom Font to a fair bit of content on my site.
I would like to use the Cufon on the default value of a text input field. But it isnt working, Its just loading the default font on the page. Is there any way I can do this?
Example of this is here
Any help appreciated..
You cannot do this using cufon. Cufon works by changing your markup and inputs do not contain markup. You'd have better luck with #font-face (try http://www.fontsquirrel.com/) to do this.
If you insist on using cufon, you could display a span with the cufon'd text over the input and on click hide the span and set focus to the input.