modify the css for font awesome

Question

I am using this file to implement icons on my input button

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type=button class="submitter" onClick="location.href='../test.htm'" value="&#xf09d; Pre-payment"/>

my Css file includes the following code

input[type="button"] {
    font-family: FontAwesome;
}

The problem is I want input button value to be of the font that is consistent with my site. Right not the words "Pre-payment" on my button are taking up fonts from font awesome . If I remove font awesome and add my own font family the icon does not appear.

Any suggestions/ Ideas?

I tried to download the font awesome css file and modify it manually from whatever site it is on, but I can't find a copy of it.

Try https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css and https://css-tricks.com/snippets/css/using-font-face/ — Rohan Kumar, Jun 05 '17 at 05:52
So like, do you want to include your own font family and merge it with fontawesome? — Sagar, Jun 05 '17 at 05:53
@Sagar yes basically use font-family: tahoma, helvetica, sans-serif; instead of font-awesome but font-awesome is needed for the icon — User56756, Jun 05 '17 at 05:54

score 2 · Answer 1 · answered Jun 05 '17 at 06:00

2

Take another aproach, instead of assigning the font-awesome directly to the input assign it as

input[type="button"]:before{ content: 'fontawesomeCode', font-family: FontAwesome }

While keeping pre-payment text on the button and aligning it with padding.

answered Jun 05 '17 at 06:00

Zoltan Kiraly

21
2

Thanks I'll give it a go and get back to you – User56756 Jun 05 '17 at 06:03
This should've worked though, if the correct code for content would've been entered, something like tihs: .element:before { content: "\f000"; font-family: FontAwesome; } – Zoltan Kiraly Jun 05 '17 at 10:39

score 1 · Accepted Answer · answered Jun 05 '17 at 06:12

I'm not sure if you can do it using an input element. It is possible using a button though. Here are two examples:

1) Using a seperate element (eg; i or span, etc) within the button for the icon.

<button type="button">
  <i class="fa fa-credit-card" aria-hidden="true"></i> Pre-payment
</button>

2) Using a pseudo element which allows you to make the necessary changes for the icon via css.

<button type="button" class="submitter" onClick="location.href='../test.htm'"/>Pre-payment</button>

<style>
button.submitter:before {
    font-family: FontAwesome;
    content:'\f09d';
    margin-right:4px;
}
</style>

you are genius... I spent hours on this...your first solution worked perfectly for me.... Thanks . — User56756, Jun 05 '17 at 06:20

score 0 · Answer 3 · answered Jun 05 '17 at 06:03

You're applying the font family at wrong point. When you're changing the font family it loads that part of the family and all the relative character mappings. So in case you want to add icons, just use the icons as given in the official fontawesome docs. Also Since <input type="button"> is unable to have any html inside it, it's not possible to include text AND icons to it.

I would suggest using <button>. Reference to my opinion <button> vs. <input type="button" />. Which to use?

HTML

<button type=button class="submitter" onClick="location.href='../test.htm'">&#xf09d; Pre-payment <i class="required-icon-fontawesome"></i></button>

CSS

button {
    font-family: tahoma, helvetica, sans-serif;;
}

I tried this but my Icon disappeared just the text remained. :( — User56756, Jun 05 '17 at 06:12

score 0 · Answer 4 · answered Jun 05 '17 at 06:03

You can use <button> tag, add a <strong> or <span> inside where you'll use default font.

<button type="button" name="button" class="submitter" onClick="location.href='../test.htm'">
  &#xf09d;
  <strong>Pre-payment</strong>
</button>

CSS

button {
  font-family: FontAwesome;
}

button strong {
  font-family: 'Your font';
}

modify the css for font awesome

4 Answers4

HTML

CSS