Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I'm working on redesigning my small business website, so i figured, why not learn something while doing it! :p
Anyways... I am trying to get my logo into the HTML.
The --free and open-source... I might add-- template I used had a placeholder glyph that looks dang good. I cannot find out how to add my logo by making it a glyph. I have a SVG/AI/png/etc of my logo, but cannot figure out how to easily edit the font file to add glyphs.
I currently have it set as an image, but since this template updates sizes of things if u r on desktop, vs mobile, it doesn't look right.
I got it to kinda work with the BirdFont app to edit the font, but then when I edited it, all of the other glyphs went away, and the sizes were off.
With the pre-installed glyphs, you summon a glyph by:
<span class="glyphicon glyphicon-GLYPH_NAME_HERE"></span>
Also, in BirdFont, i couldn't edit the name that goes to glyphicon-GLYPH_NAME_HERE, so i just edited one of them that I know i won't be using.
TL:DR; What's an easy, quick, reliable way to edit a font file, containing glyphs, to add my logo -- as a glyph?
Thanks so much!
You may try Fontastic, which allows you to create fonts with lots of vector icons from multiple sources, and add your own icons (Add more Icons -> Import icons) from SVG files or SVG fonts.
edit the glyphicon css file for a glyph that you aren't using, and set that value to your new image.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have seen in Yahoo and other sites including sites for mobile where they have this little arrows pointing up and down and these seem to scale when one zooms into the viewport. They seem crisp on every resolution level as well and I am looking to create something similar. Here is the arrow I am talking about:
arrow image >
This arrow is from the yahoo "Download All" button. Was it done with SVG, is it a UTF-8 symbol? Can this be done in CSS?
You could use something like Font Awesome.
http://fortawesome.github.io/Font-Awesome/
Font Awesome is for use with Bootstrap but there are many similar fonts ets out there for regular use too.
Here's an article detailing some:
http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process/
These icon sets are usually scaleable vector icons meaning they will work well at different resolutions.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I designed a page in photo shop.
When I try to convert it to HTML the header font looks a bit different.
But I applied the same styles and font, for example size is 36pt in Photo shop(non bold), I could get the same effect while I add BOLD when I coding in HTML.
The main problem is that, the font looks like cut letters, meaning the " I " looks like two dashes vertically arranged.
How to solve this?
Save that "page" as an image and then put that image into an HTML file.
EDIT: I think you can just use the PRINT key on your keyboard to make it really look like on your computer - even with all the Photoshop toolbars and such! But don't forget to provide the users with the color profile and illumination profile of your monitor and an exact layout of your room, and don't forget the type of light bulb you are using, the thickness and tinting of the glass in your windows and of course the angle of the sun!
The problem with converting photoshop files to a website is that Photoshop renders fonts different then browsers. In most of the cases, fonts are displayed the same as in your design, but sometimes you just can't get the fonts look exactly the same as in your photoshop file. Unfortunately, there isn't a fix for this yet.
Photoshop simply has a lot more font functionalities then browsers so you'll have to be satisfied with the simplified version in your browser.
What you can do is slice the text from the PSD as an image and include that in your HTML, but that is a very outdated method which will increase the loading time of your website.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Since font rendering is a nightmare on cross platforms (i.e. windows has very ugly anti aliasing, and TTF fonts are not anti aliased at all) I came up with the idea to create a png file for every heading in my design.
My question however implies that if I would create a H1 html element and hide it with CSS while the title is shown by a png image, would search engines this work around?
What you are proposing is a very common method for replacing text with an image. Search engines don't mind.
I would suggest that instead of hiding the element, move it off-screen, -5000px or so. Also, your users are probably going to hate you, since your site will be slow. Best just to deal with the typography as it is. I don't know what Windows system you're using, but anti-aliasing works just fine on all of my Windows boxes. If you need a different font, consider web fonts.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I am working on a site, and I am looking for basic profile icons such as:
http://akcdn.okccdn.com/media/img/icons/home_new_user_guide.png
I would use those, but I am sure those are typewritten.
Where would I be able to find similar icons that I can use for an open source project?
Thanks :)
Smashing Magazine has semi-regular free icon roundups, including icons in a wide variety of styles. They're also under a wide variety of licenses, so make sure you check before using one.
FindIcons is a great site where you can find all icons that you need in almost any format and any size (may vary). And you can sort search results by color, icon style, license etc. enjoy!
iconfinder.net is my go-to. It's been around forever.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 2 years ago.
Improve this question
I make unity game and I need icons.
I think that font awesome icons are the best.
How to get .png files of these icons?
I can't put css in unity game.
I tried to download other icons, but these images are bad.
Here is the python script to convert fontawesome icons into png with some custom needs like size, pixels and colors ... please find the below github link to know more...
https://github.com/odyniec/font-awesome-to-png
For all PHP developers !
This one helps me a lot :
https://github.com/exiang/php-font-awesome-to-png
Especially for font-awesome , developer can modify icons.data.php and can add his custom code into icons.data.php file and generate the image !
This script can also work with other Fonts , we just need to find out cheat-sheet and load it on icons.data.php file , this script will automatically generate the icons.