We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Changing the icons | Forum

Topic location: Forum home » Development » Themes
4 Everyone
4 Everyone Dec 15 '19

Is there anyone who can help us find an icon in the "Higgs" theme from the OW visual developer?

We would very much like to have changed two icons.!

Yes, we know that we have to address the developer for that, but up untill to day we have not received a response.!

Perhaps there is a solution to find out where these icons are in the theme so that we can replace them.?

Patricia Zorrilla Leader
Patricia Zorrilla Dec 15 '19
You will find the icons in yoursite.com/ow_themes/themeName/images


OW-Ghost
OW-Ghost Dec 15 '19
Have you try press "inspect" on the icon with "google chrome developer tools" to see the correct path to the icon?


Sometimes some icon belongs to plugins or other script not the theme it self.

Patricia Zorrilla Leader
Patricia Zorrilla Dec 15 '19

Maybe this can help you.

The quantity and names of the icons are always the same in all the themes, what the themes do is change the drawings.

Change the theme for one that is free and send us a screenshot where you see the icon you want to modify and we will tell you which one.

Without entering your website, without knowing what icon you are looking for, without having that theme ... It is not easy to help you!

OW-Ghost
OW-Ghost Dec 15 '19


i was "inspect" your url and i can see the icons belongs to a script(maybe a addon plugin) not to the theme images


<img> == $0


Is there a "slider plugin" to this theme or any other plugins or addons?


they who build plugins i think know what i talking about. it is a value that refer to this icon inside some script

The Forum post is edited by OW-Ghost Dec 15 '19
Oxwall Germany Club
Oxwall Germany Dec 15 '19
Topic was moved from General Questions.
OW-Ghost
OW-Ghost Dec 15 '19
similuar example from my theme:


<img src="https://mysite.com/.../img/paypal_logo.png" alt="billingpaypal"> == $0


and you have:


<img> == $0


hmmm...interesting indeed

The Forum post is edited by OW-Ghost Dec 15 '19
Patricia Zorrilla Leader
Patricia Zorrilla Dec 15 '19

They are not icons that OxWall uses for the entire web, they are exclusive images of this registration screen of this theme.

They are part of one of the images that are loaded into a slider through JavaScript .... I am not able to see the code that generates these sliders. I can't help you if I don't have the source code for this theme.

OW-Ghost
OW-Ghost Dec 15 '19
yes i was thinking that all the time it is a slider script that load this images


i agree need the source code for find them :)

The Forum post is edited by OW-Ghost Dec 15 '19
Darryl B Leader
Darryl B Dec 15 '19

Looks like OW Visuals has switched to Fontawesome icons.  I don't know if you just want to change the color, or change the icon all together, but here is the css you will be working with. Ex. the icon is on the content line content: "\f041" the color is simply on the color line color: #33bdeb

If you are looking to change the icon, you can go here to the Fontawesome website to see all of their available icon.

On the Fontawesome site you will see a list of icons. Click on the icon you are interested in, and a new page will open showing that icon. Just below the icon sizes you will see a unicode. That unicode is what you will be using. Just change the unicode itself leaving the /, and " ".


You can add the css below to your custom css for the theme in the admin panel.


/*Map marker icon*/
.red-text::before {
    content: '\f041';
    font: normal normal normal 60px FontAwesome;
    position: relative;
    margin: 10px auto;
    bottom: 0px;
    color: #33bdeb;
    display: block;
    height: 80px;
    width: 80px;
}

/*phone icon*/
.blue-text::before {
    content: '\f095';
    font: normal normal normal 60px FontAwesome;
    position: relative;
    margin: 10px auto;
    bottom: 0px;
    color: #f76f03;
    display: block;
    height: 80px;
    width: 80px;
}


The Forum post is edited by Darryl B Dec 15 '19
OW-Ghost
OW-Ghost Dec 15 '19
+1 Darryl B


I was see now the elements .blue-text::before and .red-text::before


that css code should work


the inspect tool in chrome browser is very helpful when it comes to changes css :)


i learn all the time. i like it :)


thanks


The Forum post is edited by OW-Ghost Dec 15 '19
OW-Ghost
OW-Ghost Dec 15 '19
can i ask something that is offtopic maybe?


what is the benefits to use fontawsome icons and are they free to use?


i think it must slow down website loading speed a little when it need to request the icon all the time from another server?

The Forum post is edited by OW-Ghost Dec 15 '19
Darryl B Leader
Darryl B Dec 15 '19

If you are changing it in the base css instead of just adding the code to the custom css in the admin panel, you would need to set dev mode to true, and refresh the site. You may also need to clear browser cache.

Remember that anytime you make changes to the server side files; you will need to set dev mode to true, refresh the site, and set dev mode back to false.

Darryl B Leader
Darryl B Dec 15 '19
@ Skadate Sweden. FontAwesome 4.7 is free. After that they broke into a free, and pro version. The free version didn't have the full list of icons, and had limitations. I use the CDN in my themes which is actually suppose to help load times since it isn't having to load the full file.  FontAwesome icons, like other font icons are easy to work with by being able to size them, and set colors. With jpeg icons; you have what you have. With svg icons you usually need software to change size, and color. I'm not sure about the new svg icons in the FontAwesome pro version, but that isn't free, and can only be used on one installation.
Darryl B Leader
Darryl B Dec 15 '19

@ Rob

The only thing I don't know is if they installed a custom FontAwesome icon set with the theme, or if they are using the CDN.

You may try adding !important after the unicode  [ "/fo41"!important; ]

If they are using the CDN all of the 4.7 icons should be available. If they aren't, there may be some they didn't include in a custom file.

Darryl B Leader
Darryl B Dec 15 '19

One way to find out what they are using is to look at the head section in the index.html to see if they are linking to the CDN, and which version.

If they downloaded a custom file, it would be in the fonts folder. If they did this, you could open that file to see what font icons they have available.

Darryl B Leader
Darryl B Dec 15 '19
Just a P.S.  Make sure you aren't typing the letter o instead of the number 0 "/f041"
OW-Ghost
OW-Ghost Dec 15 '19
I understand.....are we are talking "cloudflare CDN" or "fontawsome's own CDN servers" ?


problem is if they own cdn is suddenly have issues with they servers then you own website have issues to.


hmm i use cloudflare on my website for speed up image and icon loading...but still there is alwasy extra loading when a fresh page is loading with no cache(specially if they load from a external server). second time much faster.

The Forum post is edited by OW-Ghost Dec 15 '19
OW-Ghost
OW-Ghost Dec 15 '19

Rob


do you have a path like this on you server?


ow_static/plugins/fontawesome/


or


ow_static/plugins/fontawesome/css


maybe can find icons inside this folders and or add,edit new css code there

The Forum post is edited by OW-Ghost Dec 15 '19
Darryl B Leader
Darryl B Dec 15 '19

I typically use cdnjs site.


@Rob  I looked at the page source. They aren't using the CDN. They are using a plugin. Who knows what it has, or doesn't have.  There is more than one way to skin the cat, so to say.  You could add the CDN to the theme, if you want to.

Just under the opening <head> tag in the html_document.html file in the master pages just add this bit of code, and you will have FontAwesome 4.7. I put quotation marks around the code. Don't copy those.  If you do add it, be sure to set dev mode to true to refresh the site. You should then be able to go back to the css mentioned earlier to make your changes.


" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/...font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> "

The Forum post is edited by Darryl B Dec 15 '19
Pages: 1 2 »